Dev Tools

GrapesJS — Web Page & HTML Builder

Build web pages and HTML templates visually: drag blocks onto a live canvas, restyle any element with the style manager, and edit the underlying markup — all in your browser. Nothing you build is ever uploaded.

Related tools

reveal.js — HTML Presentation Frameworkthree.js Editor — In-Browser 3D Scene EditorUniver Spreadsheet — Online Spreadsheet Editorx-spreadsheet — Browser Spreadsheet Grid

Was this useful?

Related tools

reveal.js — HTML Presentation FrameworkMisc

A live, interactive slide deck built with reveal.js, the open-source HTML presentation framework with CSS 3D transforms, transitions, and speaker notes.

three.js Editor — In-Browser 3D Scene EditorMisc

Build, edit, and export 3D WebGL scenes in your browser: geometries, materials, lights, cameras, and scripts.

Univer Spreadsheet — Online Spreadsheet EditorMisc

Edit spreadsheets in your browser: formulas, cell formatting, conditional formatting, data validation, filters, and sorting.

x-spreadsheet — Browser Spreadsheet GridMisc

A free, open-source spreadsheet grid with formulas, cell styling, and multiple sheets, running entirely in your browser.

Editor.js — Block-Style WYSIWYG EditorText

Write rich, structured content with a block-style editor and get clean JSON output, entirely in your browser.

Quill — Rich Text WYSIWYG EditorText

Write and format rich text with a full WYSIWYG toolbar: headings, lists, colors, links, images, and more, entirely in your browser.

About GrapesJS — Web Page & HTML Builder

GrapesJS is a free, open-source (BSD-3-Clause) drag-and-drop web page builder for creating HTML templates and layouts without writing code by hand. Drag blocks onto a live canvas, select any element to restyle it with the visual style manager, rearrange the layout, and drop into the code view to edit the underlying HTML and CSS directly. The build here is self-hosted directly from the GrapesJS/grapesjs project's own demo and runs entirely client-side: nothing you build is ever uploaded to any server by this site.

How to use

  1. Drag blocks from the block manager onto the canvas to assemble your page.
  2. Click any element and use the style manager to adjust layout, typography, spacing, and decorations.
  3. Open the code view to inspect or copy the generated HTML and CSS.

Frequently asked questions

Is my data uploaded anywhere?
No. Building, styling, and code editing all happen entirely in your browser — nothing you build is sent to a server by this site.
Is GrapesJS free to use?
Yes — it is free and open source, licensed under the BSD-3-Clause license.
Can I get the HTML and CSS out?
Yes — the built-in code view shows the generated HTML and CSS for your page, which you can copy and use anywhere.