Fully customizable UI
Start with our UI. Make it your own.
Arrange built-in panels, adjust the layout, and add your own components. The editor runs inside your application, so it can work alongside the UI you already have.
AI visual editor for SaaS
Embeddable drag-and-drop editor for building emails, landing pages, websites, and more.
Give your users AI-powered content creation tools directly from your app.
POWERING SOLUTIONS FOR
Built to become part of your product
Your product. Your workflows.
Your visual editor.
Give your users the freedom to create. Keep control of how the editor looks, what it can do, and how it fits your application.
Built-in AI assistant
AI that works inside your workflow.
Let users create and edit content through conversation, then refine it visually. Customize the chat UI, instructions, and tools to connect AI to your product.
Explore AI integrationWhite label & theming
An editor that matches your brand.
Match your application with light or dark themes, custom colors, and your own icons. Carry your brand through the entire editing experience.
Explore editor themingOne SDK, many editor experiences
Build beyond a single content format.
Create a landing page builder, a newsletter designer, or a document editor on the same foundation. Structured project JSON keeps content editable; project-specific exports turn it into the output your application needs.
Websites & landing pages
Export HTML, CSS, and JavaScript for your own publishing pipeline.
Web projectsDocuments & custom output
Create document experiences and extend exports to fit your use case.
Document projectsCustom blocks & components
Give users building blocks made for your product.
Combine built-in blocks with your own components, from product cards to branded sections. Choose what users can add and how each block behaves.
Global styles
Start every project with your design system.
Define shared colors, typography, and styles in your templates. Give users one place to manage their brand and update the elements that use it.
Data sources & template engines
One template. A personal preview for every record.
Connect content to your application data, then preview different records on the canvas. Configure import and export for your template syntax to keep personalized newsletters editable.
Data sources
Customer offers7 records
| Customer | Product | Price | Offer |
|---|---|---|---|
| Ava Stone | Studio headphones | $129 | 20% off |
| Leo Martin | Everyday backpack | $89 | Free delivery |
| Mia Chen | Desk lamp | $59 | 15% off |
| Noah Reed | Wireless keyboard | $99 | 10% off |
| Emma Wilson | Smartwatch | $149 | 25% off |
| Oliver Brooks | Portable speaker | $79 | Free delivery |
| Sofia Patel | Travel backpack | $119 | 15% off |
Code
YourBrand.Picked for you
Hi {{ customer.firstName }},
A little upgrade for your everyday.
{{ product.name }}
{{ offer }}{{ product.price }}
Explore your offer
Template fields · ready to connect
Your content, your infrastructure
Keep control of the data you create.
Save project JSON to your backend, store assets in your own media infrastructure, and publish exported content wherever you choose. Your storage and delivery stay in your hands.
Explore custom storage
The details are built in
A complete toolkit for content creation.
Start with the capabilities your users expect. Adapt them as your product grows.
Blocks built for your users
Offer ready-to-use blocks, add your own components, and curate exactly what users can drag into a design.
Multiple pages, SEO included
Manage pages in one project, with built-in settings for titles, SEO metadata, and social sharing tags.
Design for every screen
Give users device previews and responsive styling controls to refine layouts across desktop, tablet, and mobile.
Content connected to your data
Use merge tags, conditions, and collections to turn application data into personalized, repeatable content.
Your template syntax, too
Configure import and export for your template engine, so visual editing fits your existing rendering workflow.
An asset manager that connects
Connect your media library through asset providers, customize uploads, or bring your own asset manager UI.
A head start with templates
Let users start from your designs or the built-in catalog. Manage templates in the editor and access the catalog through the API.
A design system in every project
Define shared colors, typography, and styles so users can manage the brand consistently across their content.
Reuse the work that matters
Turn repeated elements into symbols and manage the structure of each page with the layers panel.
Keep building on top
Extend it in every direction.
Add Studio plugins for richer content and integrations, or build your own with the editor API.
Fits the stack you already use.
Use the React integration or the JavaScript SDK with your framework of choice. Connect the editor to your application through configuration, events, and APIs.
Explore integration examplesAn open-source core. A product-ready SDK.
Studio SDK builds on the open-source GrapesJS framework, adding a polished editor UI, Studio plugins, and support from the team behind the core.
Explore GrapesJS on GitHubBuild your first editor. Make it yours.
Try Studio SDK in your app and explore the experience you can give your users. Start on the free plan.