IconVault logoIconVault
Sign in

ContentEditable Playground - Free Online Tool | IconVault

Experiment with contenteditable: execCommand toolbar, plaintext-only mode, live selection inspector and HTML output. Free, in-browser.

All tools

ContentEditable Playground

Rich-text editing, selection inspector and HTML output

5 of 5 free uses left

Try editing me

Select some text and hit bold or italic. Switch to plaintext-only mode to see formatting get stripped on paste and input.

  • Bullet one
  • Bullet two

5 of 5 free copies left.

Editing mode

Full rich text: pasted content keeps its formatting, execCommand styles apply.

Live innerHTML output

<h2>Try editing me</h2><p>Select some text and hit <b>bold</b> or <i>italic</i>. Switch to <code>plaintext-only</code> mode to see formatting get stripped on paste and input.</p><ul><li>Bullet one</li><li>Bullet two</li></ul>

Note: document.execCommand is officially deprecated but remains the only built-in rich-text editing API, so every browser still supports it.

About this tool

IconVault's ContentEditable Playground is a hands-on lab for browser rich-text editing. Format text with an execCommand toolbar, switch between rich-text and plaintext-only modes, inspect the live Selection and Range objects behind your cursor, and watch the generated innerHTML update as you type. It is free and runs fully in your browser.

contenteditable powers comment boxes, notes apps and WYSIWYG editors across the web, but its behavior is full of surprises: how plaintext-only strips pasted formatting, what HTML execCommand actually generates, and how selections map to DOM nodes and offsets. This playground exposes all of it live, which makes it invaluable when you are building or debugging any in-browser editor.

Frequently asked questions

Popular searches

contenteditable playgroundcontenteditable tutorialdocument.execcommandexeccommand bold examplecontenteditable plaintext-onlyplaintext-only vs truecontenteditable paste as plain textrich text editor javascriptbuild wysiwyg editor jsselection api tutorialwindow.getselection examplerange startcontainer endoffsetinspect selection javascriptcontenteditable innerhtmlsanitize contenteditable htmlcontenteditable xsscontenteditable placeholdercontenteditable eventsinput event contenteditablecontenteditable reactcontenteditable cursor positionset cursor contenteditablecontenteditable line breakscontenteditable strip formattingdocument.execcommand deprecated alternativeexeccommand formatblockexeccommand insertunorderedlistexeccommand removeformatexeccommand forecolorcontenteditable toolbarcustom rich text toolbarcontenteditable demolearn contenteditablecontenteditable examplescontenteditable browser supportcontenteditable mobilecontenteditable accessibilitycontenteditable ariacontenteditable spellcheckcontenteditable free toolhtml editor playgroundwysiwyg playground onlineselection range visualizerdom range explainedcollapsed selectionanchor node focus nodecontenteditable gotchascontenteditable best practicesmedium style editor jscontenteditable rich text editor demo

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →