title: Quick start category: builds-guides
Creating an editor using CKEditor 5 build is very simple and in short can be described in two steps:
<script> tag.create method to create the editor.In your HTML page add an element that CKEditor should replace:
<textarea name="editor1" id="text-editor"></textarea>
Load CKEditor 5, the classic editor build (here CDN location is used):
<script src="https://cdn.ckeditor.com/ckeditor5-build-classic/0.11.0/build/ckeditor.js"></script>
Call the {@link module:editor-classic/classiceditor~ClassicEditor#create ClassicEditor#create} method.
<script>
ClassicEditor.create( document.querySelector( '#text-editor' ) );
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5-build-classic/0.11.0/build/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<textarea name="editor1" id="text-editor"></textarea>
<script>
ClassicEditor.create( document.querySelector( '#text-editor' ) );
</script>
</body>
</html>
In your HTML page add an element that CKEditor should make editable:
<div id="text-editor"></textarea>
Load CKEditor 5, the inline editor build (here CDN location is used):
<script src="https://cdn.ckeditor.com/ckeditor5-build-inline/0.11.0/build/ckeditor.js"></script>
Call the {@link module:editor-inline/inlineeditor~InlineEditor#create InlineEditor#create} method.
<script>
InlineEditor.create( document.querySelector( '#text-editor' ) );
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Inline editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5-build-inline/0.11.0/build/ckeditor.js"></script>
</head>
<body>
<h1>Inline editor</h1>
<div id="text-editor">This is some sample content.</div>
<script>
InlineEditor.create( document.querySelector( '#text-editor' ) );
</script>
</body>
</html>
In your HTML page add an element that CKEditor should make editable:
<div id="text-editor"></textarea>
Load CKEditor 5, the balloon toolbar editor build (here CDN location is used):
<script src="https://cdn.ckeditor.com/ckeditor5-build-balloon-toolbar/0.11.0/build/ckeditor.js"></script>
Call the {@link module:editor-balloon-toolbar/balloontoolbareditor~BalloonToolbarEditor#create BalloonToolbarEditor#create} method.
<script>
BalloonToolbarEditor.create( document.querySelector( '#text-editor' ) );
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Balloon toolbar editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5-build-balloon-toolbar/0.11.0/build/ckeditor.js"></script>
</head>
<body>
<h1>Balloon toolbar editor</h1>
<div id="text-editor">This is some sample content.</div>
<script>
BalloonToolbarEditor.create( document.querySelector( '#text-editor' ) );
</script>
</body>
</html>
Check the {@link builds/guides/integration/configuration Configuration guide} to learn how to configure the editor, e.g. change the default toolbar.