GluePuddingTool

HTML WYSIWYG Editor

Edit rich text visually and export the HTML. The toolbar offers bold, italic, underline, strikethrough, headings, lists and links, and the generated HTML source updates live and can be copied with one click.

FreeOnline Tool
Loading…

How to Use

  1. Type or paste your text into the editing area
  2. Select text and click a toolbar button to apply formatting: bold (B), italic (I), underline (U), strikethrough (S) and so on
  3. Click H1 or H2 to turn the current paragraph into a heading, or P to turn it back into body text
  4. Click a list button to insert a bulleted or numbered list, or the "Link" button to turn the selected text into a hyperlink
  5. Click "Clear formatting" to strip all formatting from the selection
  6. Use the "Preview" tab below to see the rendered result, and the "Source" tab to view and copy the generated HTML

Features

  • What you see is what you get: type and style your content directly in the editable area without writing any HTML
  • The toolbar provides ten common actions: bold, italic, underline, strikethrough, heading level one and two, body paragraph, bulleted and numbered lists, insert link and clear formatting
  • The HTML source is exported live as you edit, with both a "Preview" and a "Source" view
  • Copy the generated HTML with one click and paste it into a web page, an email or another rich text editor

Use Cases

Writing a formatted HTML snippet quickly
Produce HTML with headings, bold text and lists through a visual interface instead of typing tags by hand.
Composing email or announcement bodies
Lay out a notice visually, then paste the exported HTML into an email system or announcement tool that accepts HTML.
Preparing content for a CMS or blog
Draft and format the content here when the target system's own editor is inconvenient, then paste the HTML source across.
Demonstrating HTML formatting
Show quickly what markup results from bolding text or adding a link, which is handy for teaching or preparing code examples.

FAQ

Can I use the generated HTML directly on my site?
Yes. The output uses standard HTML tags such as <b>, <h1>, <ul> and <a>, so you can copy and paste it into a page. It is worth adjusting the markup to match the styling conventions of the target page.
How does the link button work?
Select the text you want to link, click the "Link" button and enter the full URL, including https://, in the prompt. The selected text is then converted into a hyperlink.
Is my content saved automatically?
No. The content lives only in the editing area of the current page and is lost when you refresh or leave. Copy the exported HTML source and save it locally before you close the page.
Why do some toolbar buttons behave differently in different browsers?
The editor is built on the browser's native rich text editing API, and browsers differ slightly in how they render individual formatting commands. The core features such as bold, lists and links work in all major browsers (Chrome, Edge, Firefox and Safari).