When I started programming front-end design objects, input components were always the most problematic ones. Personally, my opinions of the quality of a website or application derive precisely from these objects.
There's nothing more disappointing for a user than taking the time to type text and realizing the editor isn't doing exactly what they want.
"What you see is what you get" was the name chosen by programmers of an attribute from a component that has become ubiquitous in internet applications: the WYSIWYG Editor.
If you've used a device connected to the internet, you've likely interacted with one of these components.
This type of editor allows users to insert and format text, images, videos, and any kind of elements intuitively, previewing changes in real time.
This is why WYSIWYG editors have become key components in platforms such as blogs and social networks.
These components are usually embedded within websites or mobile applications, where users perform their main interactions with the computer.
This type of component is primarily written in the three basic web programming languages: JavaScript, HTML, and CSS.
These editors are relatively basic in terms of web development knowledge, and creating one is a valuable learning exercise.
Key Takeaways
- WYSIWYG editors are essential yet underappreciated
- Solid foundations matter in software development
- The right command makes it click
- The power and limits of JS executives
- Toolbars enhance usability
- Challenges grow with complexity
- Accessibility is non-negotiable
- Traditional practices still reign supreme
1. Creating the HTML Page
Building a WYSIWYG editor requires more than advanced knowledge in diverse aspects of software engineering. With a solid foundation in HTML, CSS, and JavaScript, any developer needs to have this knowledge to start making one of these.
Let's now examine these foundational aspects. The first step is to open your favorite code editor and create a file called editor.html. You can even use Windows Notepad or macOS Text Edit to create the file. Inside it, insert the basic HTML structure:
<!doctype html>
<html>
<head>
<title>Editor</title>
</head>
<body>
<div>Editor</div>
</body>
</html>
Explaining the structure:
<!DOCTYPE html>: Indicates that the document is HTML5.<html>: Root element of the page.<head>: Contains metadata, such as the title.<title>: Name that appears in the browser tab.<body>: Where the visible content of the page will be inserted.
You can use traditional HTML tags to structure the content:
<h1>,<h2>: Headings<p>: Paragraphs<a>: Links*<img>: Images<ul>,<ol>,<li>: Lists
To add styling, use CSS (inline, internal to the <head> with <style>, or external via a .css file).
2. Making the Area Editable
To make the content editable directly on the page, add the contenteditable="true" attribute to your <div> element:
<!doctype html>
<html>
<head>
<title>Editor</title>
</head>
<body>
<div contenteditable="true">Editor</div>
</body>
</html>
This attribute transforms the <div> into an interactive area where the user can type, delete, copy, and paste content, just like a traditional text editor.
Reference: MDN - contenteditable
3. Transforming the Functional Component with JavaScript
To apply formatting such as bold, italics, or lists, we can use the document.execCommand() method, which executes commands directly on the editable area. Syntax:
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
- aCommandName: Command name, such as "bold" or "insertImage".
- aShowDefaultUI: Defines whether the browser's default interface should be displayed (usually false).
- aValueArgument: A required argument for some commands (e.g., URL for links).
Reference: MDN - execCommand
📌 Note: These commands are deprecated in some browsers and may not work properly. Consider this when building production editors.
4. Adding Tools and Functionality
Toolbar: Buttons to Format Text
You can create a toolbar with buttons that trigger commands:
<span data-action="bold">B</span>
<span data-action="italic">I</span>
<span data-action="insertUnorderedList">- List</span>
Connect the buttons to execCommand via JavaScript:
document.querySelectorAll("[data-action]").forEach(button => {
button.addEventListener("click", () => {
const command = button.getAttribute("data-action");
document.execCommand(command, false, null);
});
});
Inserting Links and Images
For links:
document.execCommand("createLink", false, url);
For images:
document.execCommand("insertImage", false, imageUrl);
Previewing HTML Code
Add a second <textarea> or <pre> that displays the HTML content:
editor.oninput = () => {
htmlPreview.innerText = editor.innerHTML;
};
5. Technical Challenges and Scalability
Building a WYSIWYG editor seems easy at first, but there are real issues:
- Browser Inconsistencies: Each product interprets JavaScript commands differently. Firefox handles backspace and Enter differently from Chrome. You may need to normalize behavior. The other option is to use a library that abstracts this away.
- Complex Node Manipulation: Difficult elements like tables within lists or blockquotes increase DOM manipulation complexity.
- Real-Time Synchronization: Keeping the DOM in sync with a document model is hard, especially with multiple users or large data sets. Use frameworks for collaborative editing.
- State Management: If the editor is part of a bigger application, consider using state libraries. These help manage UI state and undo/redo history.
Case Study: Froala has been tackling these same problems for years. Studying their plugin systems can give you insight into scalable architecture.
6. Accessibility is a Must
A full editor must be accessible to everyone. To achieve this, follow best practices:
- Keyboard Navigation: All controls must be accessible without a mouse. Use tabindex, aria-label, and keyboard listeners.
- Contrast: Use color combinations that comply with market standards.
- Screen Readers: Use ARIA attributes and semantically correct elements (like
<button>instead of<span>) for compatibility.
Quick Tip: Use browser extensions to test accessibility automatically.
Conclusion
Building a WYSIWYG editor from scratch is a great way to learn how browsers manipulate the DOM and how commands are applied to editable content.
But the more features the editor has, the more complex it becomes to maintain and stabilize.
Start simple and prioritize the user experience. Whenever possible, follow traditional development practices: clean code and cross-browser compatibility.
This guide is based on publicly available browser documentation and established front-end practices.
Daniel Santos is a computer engineer and technology journalist who has covered front-end issues for specialized publications for over 5 years.
Frequently Asked Questions (FAQ)
What does WYSIWYG mean?
WYSIWYG stands for What You See Is What You Get. It refers to editors that let users format text and content with a visual interface that reflects how the final output will appear.
Is it still worth building your own WYSIWYG editor in 2025?
Yes, for learning purposes. Building your editor is an excellent exercise in DOM manipulation, UI design, and JavaScript basics. However, for production use, seasoned libraries like Froala offer stability and long-term support.
Can I make a working editor with just HTML and JavaScript?
It is possible. With some formatting tools, you can have a basic WYSIWYG editor up and running quickly, but the experience was not so good.