Blob Notebook
Switch guideHTML editor

HTML EDITOR

Edit a little HTML and see how it reads.

Draft a semantic page fragment, keep a useful form pattern, or inspect pasted markup. Blob Notebook pairs HTML source editing with a sandboxed preview and local saving.

Open editor

Free to use · No account needed · Saved in this browser

reading-list.html HTML
<section aria-labelledby="reading-title">
  <h1 id="reading-title">Reading list</h1>
  <ul>
    <li><a href="https://example.com/">Project guide</a></li>
  </ul>
</section>
A small HTML fragment with a named section, a heading, and a link.Try this example

EDIT IN YOUR BROWSER

Your local draft

The notebook’s editing tools, right here. Save to notebook when you want a named copy.

Open full editor

Enable JavaScript to edit here, or open the full editor above. The example and guide are always available.

This draft is shared with the full editor for this task and stays separate from named notes. Export a copy or save to notebook to include it in a notebook backup. This editor page and its tools reopen offline after the editor reports readiness. Informational and privacy guides need a connection.

A FEW SIMPLE STEPS

Get started

  1. Create a note and choose HTML or import a .html file.
  2. Paste a document or a short markup fragment, then use Format if needed.
  3. Open Preview and inspect the available screen widths.
  4. Return to Edit for changes, then download or copy your HTML source.

Open editor takes you to the draft on this page. Paste or open a source file, or choose Try this example. Save to notebook keeps a named copy with your notes. Your workspace style stays unchanged.

Review markup as source and as a page

Choose HTML for tag highlighting, then format supported markup to make the nesting easier to follow. Open Preview to inspect the rendered HTML in a sandboxed frame, with desktop, tablet, and mobile preview widths.

A fragment can be previewed without writing an entire document wrapper. Keep related CSS in a style element when you want it included in that HTML example; separate notebook notes are not automatically linked as a website project.

Use the preview for a focused check

HTML previews start with scripts and external resources blocked. To run scripts or load remote images and styles, use Enable external resources and confirm the warning for content you trust. Use Reload to reset the preview state.

The preview does not install packages, build a project, or host a website. For large source documents, preview uses only the first 200,000 characters. Download the .html source to continue work in your project.

A few questions

Does the HTML preview execute JavaScript?

Yes. Scripts in the HTML can execute inside the sandboxed preview frame. This is useful for small examples; the notebook does not provide a package manager or an application build system.