Features Deep Dive
Built for Rails developers.
Loved by content teams.
ActiveCanvas packs a visual editor, AI generation, compiled Tailwind CSS, page versioning, a media library, and flexible auth into a single mountable engine. Here is everything under the hood.
Visual Editor
Drag, drop, publish.
No front-end deploy needed.
The GrapeJS-powered editor lives inside your Rails admin. Content teams build pages visually while developers keep full control over the markup.
Drag-and-drop blocks
Sections, columns, text, images, videos, forms, and custom blocks
Inline code editing
Toggle into raw HTML/CSS/JS with syntax highlighting when you need precision
Responsive preview
Switch between desktop, tablet, and mobile viewports in one click
Style manager & layer panel
Spacing, typography, backgrounds, borders, and a full layer tree for complex layouts
<div class="max-w-4xl mx-auto">
<h1 class="text-6xl font-bold">
Ship faster...|
AI Content Generation
AI that knows
your CSS framework.
Powered by RubyLLM, ActiveCanvas sends framework-aware prompts so the AI outputs code using your configured CSS framework — Tailwind v4, Bootstrap 5, or vanilla CSS.
Text & HTML generation
Describe a section in plain English. The AI streams production-ready HTML directly into the editor canvas.
Image generation
Create images from text descriptions via DALL-E. Generated files are stored in your media library through Active Storage.
Screenshot to code
Upload a screenshot of any design and the AI recreates it as production HTML using your configured CSS framework.
Tailwind CSS
CDN in the editor.
Compiled in production.
While editing, pages load the Tailwind CDN for instant utility class previews. When you save, ActiveCanvas compiles per-page CSS using the tailwindcss-ruby gem — zero CDN dependency in production.
# 2. On save, HTML is written to a temp file
# 3. tailwindcss-ruby compiles only used classes
# 4. Minified CSS is stored on the page record
# 5. Production serves inline <style> — no CDN
ActiveCanvas::TailwindCompiler.compile(
page.content,
identifier: "page ##{page.id}"
)
Also supports Bootstrap 5 and vanilla CSS via the css_framework config option.
1. CDN Preview
Editor environment
2. Compile
On save (background job)
3. Serve
Production — zero CDN
Page Versioning
Every change tracked.
Roll back in one click.
ActiveCanvas automatically snapshots content and CSS every time a page is saved. Unified diffs show exactly what changed, and you can restore any previous version instantly.
Automatic version tracking
Every save creates a new version — no manual action required
Visual diffs
See line-by-line changes between any two versions with content and CSS tracking
Configurable retention
Keep up to 50 versions per page by default, or set max_versions_per_page to any value
Size tracking
Byte-level size differences for each version to monitor content growth
Media Library
Upload, manage, embed.
Active Storage under the hood.
The built-in media library integrates directly with the GrapeJS editor. Drag images from the library into your pages, or upload new assets without leaving the editor.
JPEG, PNG, GIF, WebP, AVIF, PDF
Optional SVG support with configurable security settings
Any storage backend
Local disk, Amazon S3, Google Cloud Storage, or Azure Blob Storage via Active Storage
Signed or public URLs
Secure signed URLs by default, or enable public_uploads for direct CDN access
Automatic thumbnails
Image variants generated on the fly for the editor grid and previews
Authentication
Four ways to lock it down.
Pick what fits your app.
ActiveCanvas runs in an isolated engine namespace, so authentication never conflicts with your app. Choose from Devise, custom controllers, HTTP Basic, or lambda-based auth.
Devise Integration
Point to your existing Devise method and you are done. Works with any Warden-based strategy.
Parent Controller
Inherit authentication from your own admin base controller. All before_actions and helpers carry over.
"Admin::ApplicationController"
HTTP Basic Auth
Quick setup for staging or internal tools. Credentials stored in Rails credentials for security.
config.http_basic_user = "admin"
config.http_basic_password =
Rails.application.credentials.canvas_pw
Lambda / Proc
Full control with a lambda. Runs as a before_action on every admin request. Perfect for custom auth systems.
redirect_to login_path \
unless current_user&.admin?
}
SEO & Open Graph
Search-ready out of the box.
Every page includes editable meta title, description, Open Graph tags, and Twitter Card fields. ActiveCanvas also supports JSON-LD structured data for rich search results.
Meta Tags
Title, description, and canonical URL per page
Open Graph
og:title, og:description, og:image for social sharing
JSON-LD
Structured data for rich snippets in search results
Get started in
60 seconds.
One gem. One install command. A full CMS inside your Rails app.