automation

grapesjs: Drag‑Drop Web Builder to Launch Sites Faster

Create responsive templates without writing code—ideal for founders needing quick landing pages or internal tools. Backed by 26k+ GitHub stars.

From the repo · “Free and Open source Web Builder Framework. Next generation tool for building templates without coding”

26,331 stars+19★ this week4,654 forksTypeScriptGuide quality 9/10 · reviewed Oct 5Install verified Sep 21Updated 10/21/2026100% free · open source
What it does

GrapesJS is a free and open-source web builder framework that allows founders to create templates without coding, ideal for building custom web applications.

When to use it
  • •You need to create a custom website or web application without extensive coding knowledge
  • •You want to build a prototype or MVP quickly without worrying about the underlying code
  • •You need to create a web page or template that can be easily edited or customized by non-technical team members
Ready-to-paste prompt
const editor = grapesjs.init({ container: '#gjs', components: '<div style="width: 100%; height: 100vh; background-color: #f0f0f0;"></div>' })
Heads up: Make sure to include the GrapesJS CSS file in your HTML file to ensure proper styling of the editor, you can do this by adding the following link tag: <link rel='stylesheet' href='https://unpkg.com/grapesjs/dist/css/grapes.min.css'>
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup✓ Install verified 9/21/2026

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/grapesjs && curl -fsSL https://workflowstacks.com/api/skills/grapesjs/claude-skill -o ~/.claude/skills/grapesjs/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How grapesjs: Drag‑Drop Web Builder to Launch Sites Faster works
Codeflow
Free to inspect

Grapesjs: Drag‑Drop Web Builder to Launch Sites Faster is a large TypeScript project (~49k lines across 395 code files, plus 142 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit this month, Other license, has a test suite.

Size
Large codebase
~49k lines · 395 code files · ~7 h to skim
Setup
One-command install
Installs like a normal app. Reading the code is optional.
Runs on
Node.js
No API keys detected
TypeScript 91%JavaScript 6%SCSS 3%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    package.json
    Dependencies and the commands it exposes
  3. 3
    packages/core/README.md
    Inside packages/core/ — the main logic begins here
What's in each folder
packages/core/Core code — the actual logic533 files
packages/cli/Command-line entry points24 files
docs/Documentation147 files
scripts/Helper scripts4 files
.github/CI / automation (GitHub Actions)14 files
READMEHas testsDocumentedCI checksOther licenseUpdated this month
Quick Actions
Details
Creator
GrapesJS
Language
TypeScript
Category
automation
Published
1/22/2016

Are you the creator of this tool? and earn 85% of every sale.

Show it off in your README:

Featured on WorkflowStacks
[![Featured on WorkflowStacks](https://workflowstacks.com/api/badge/grapesjs.svg)](https://workflowstacks.com/skills/grapesjs?utm_source=github&utm_medium=badge)
🔥 Hot this week, in your inbox
Skills like this, every Monday.

The five fastest-growing open-source AI skills, ranked by GitHub star growth. One email a week, unsubscribe anytime.

Do this with a working workflow

Pages we wrote and tested that put a skill like this to work — importable n8n templates, outcome guides and Claude Desktop configs.