Browse by category
GrapesJS Web pages
GrapesJS web page plugins cover everything that goes into building a page rather than an email: full-page templates, multi-section layouts, and starters for landing pages, portfolios, and marketing sites. Install a template pack and your users open the editor on a finished page they can rework, instead of an empty canvas. Browse free community packs and premium libraries, each with a live preview and version compatibility details.
About GrapesJS Web pages
A web page in GrapesJS is a tree of components on the canvas, and the plugins in this category supply that tree ready-made. They fall into two groups. Page templates deliver a complete, finished page — a landing page with hero, features, testimonials and a call to action, a portfolio with an image grid and biography, or a long-form marketing page with sticky navigation — which your users open and rework rather than assemble from parts. Section libraries deliver the parts instead, so a page is built by stacking pre-made sections in any order; they overlap with block libraries but are cut at page-section scale. Both differ from a preset, which configures the editor itself, and from a site builder, which manages many pages at once. Three practical checks before installing. Confirm the pack's CSS framework is loaded inside the canvas iframe, because the canvas does not inherit your application's stylesheets. Verify the template defines styles per breakpoint rather than desktop only. And decide up front whether you will store templates as project JSON, which stays editable, or as exported HTML, which does not.
GrapesJS Web pages — FAQ
- What is the difference between a page template and a preset?
- A preset configures the editor — panels, blocks, style sectors — and leaves the canvas empty. A page template configures nothing and fills the canvas with a finished page. You normally use both: a preset to set up the editor once, and templates to give users a starting point for each new page.
- How do I load a page template into GrapesJS?
- For a finished page, editor.setComponents and editor.setStyle replace the canvas content with the template's markup and CSS. If the template ships as project JSON, editor.loadProjectData restores it with the component model intact, which is the better route because everything stays properly editable.
- Can GrapesJS handle a multi-page website?
- Yes — the Pages API manages several pages in one project and editor.Pages.select switches between them. The plugins here are page-scoped, so they fill one page at a time. If you need page listing, routing and publishing as a product feature, look at the site builder category instead.
- Are GrapesJS page templates responsive?
- Good ones are, but it is not automatic. GrapesJS writes real media queries when styles are set with a device selected, so a template built only on desktop carries no mobile rules. Check the listing's preview at each breakpoint before installing, and confirm the pack states which devices it was designed against.
- Why does a template look unstyled inside the editor?
- Because the canvas is an iframe and does not inherit your application's stylesheets. A template built for Tailwind or Bootstrap renders as plain HTML until you load that framework into the canvas via the editor's canvas styles option. This is the single most common reason a freshly installed pack looks broken.
Browse by tag