ActiveCanvas

ActiveCanvas uses Active Storage. For stable media references, it uses data-ac-media-id attributes so that ContentRenderer can resolve fresh URLs (including signed URLs) at render time.

Public Uploads: To use public URLs, set config.public_uploads = true in the initializer AND ensure your Active Storage service is declared public: true in config/storage.yml.

SVG Security: SVG uploads are disabled by default. If enabled via config.allow_svg_uploads = true, ActiveCanvas serves them with Content-Disposition: attachment on signed-URL paths to prevent XSS. Warning: This protection is bypassed if public_uploads is true. If using public uploads, serve media from a separate origin/bucket.

ActiveCanvas can compile Tailwind CSS at runtime to avoid CDN dependencies on public pages. In the editor, it uses the Tailwind CDN for live previews, but on save, it compiles only the classes used on that specific page. To enable this, add the tailwindcss-ruby gem.

gem "tailwindcss-ruby", ">= 4.0"

You can change where the engine is mounted in your application or override its views to match your app's design.

# Change mount path in config/routes.rb
mount ActiveCanvas::Engine => "/pages"

# Override views by copying them to your app:
app/views/active_canvas/pages/show.html.erb
app/views/active_canvas/admin/pages/index.html.erb
app/views/layouts/active_canvas/admin/application.html.erb

Once installed, follow these steps to build your first page:

1. Navigate to /canvas/admin.
2. Create a Page Type (e.g., "Landing Page").
3. Create a Page, then click Editor to open the visual builder.
4. Use drag-and-drop blocks, AI generation, or image uploads to build content.
5. Publish the page to make it live at /canvas/your-slug.

To install ActiveCanvas, add the gem to your Gemfile and run the interactive installer. The installer handles database migrations, creates the configuration initializer, mounts the engine in your routes, and prompts you for CSS framework and AI preferences.

# Add to Gemfile
gem "active_canvas"

bundle install
bin/rails generate active_canvas:install

ActiveCanvas uses RubyLLM for AI features like Chat, Image Generation, and Screenshot-to-Code. You must provide API keys via environment variables or Rails credentials in the initializer. After configuration, you must sync the models.

# config/initializers/active_canvas.rb
Rails.application.config.after_initialize do
  # Via environment variables
  ActiveCanvas::Setting.ai_openai_api_key = ENV["OPENAI_API_KEY"]
  ActiveCanvas::Setting.ai_anthropic_api_key = ENV["ANTHROPIC_API_KEY"]
  ActiveCanvas::Setting.ai_openrouter_api_key = ENV["OPENROUTER_API_KEY"]

  # Or via Rails credentials
  credentials = Rails.application.credentials.active_canvas || {}
  ActiveCanvas::Setting.ai_openai_api_key = credentials[:openai_api_key]
end

After setting keys, sync models using:

bin/rails active_canvas:sync_models

The admin interface is open by default. You must configure authentication before production. You can use Devise, HTTP Basic Auth, or custom logic.

# Using Devise
ActiveCanvas.configure do |config|
  config.authenticate_admin = :authenticate_user!
end

# Using HTTP Basic Auth
ActiveCanvas.configure do |config|
  config.authenticate_admin = :http_basic_auth
  config.http_basic_user = "admin"
  config.http_basic_password = Rails.application.credentials.active_canvas_password
end

# Using a custom controller
ActiveCanvas.configure do |config|
  config.admin_parent_controller = "Admin::ApplicationController"
end

# Using custom logic (lambda)
ActiveCanvas.configure do |config|
  config.authenticate_admin = -> {
    unless current_user&.admin?
      redirect_to main_app.root_path, alert: "Access denied"
    }
  }
end

ActiveCanvas supports AI-powered features like text/HTML generation, DALL-E image generation, and screenshot-to-code conversion. You can configure keys for the following providers:

• OpenAI (GPT-4, DALL-E)
• Anthropic (Claude)
• OpenRouter

Storage Methods

1. Environment Variables (Recommended for production): Set the following variables in your .env or environment:

   • OPENAI_API_KEY
   • ANTHROPIC_API_KEY
   • OPENROUTER_API_KEY

2. Rails Credentials (Encrypted): Add the keys to your encrypted credentials file under the active_canvas key:

   active_canvas:
     openai_api_key: "YOUR_KEY"
     anthropic_api_key: "YOUR_KEY"
     openrouter_api_key: "YOUR_KEY"

If you skip configuration during the setup wizard, you can add keys later via the Admin > Settings > AI interface.

To prevent engine migrations from automatically running in your host application, ActiveCanvas requires you to manually copy them into your application's migration directory. Run the following command to install the necessary migrations:

rails active_canvas:install:migrations

During installation, you can choose how the ActiveCanvas editor and public pages are styled:

• Tailwind CSS (recommended): Requires the tailwindcss-rails gem. The installer will offer to add this to your Gemfile and run bundle install.
• Bootstrap 5: Loaded via CDN.
• None: No framework is applied.

If you skip framework selection during installation, you can change this setting later in the Admin > Settings panel.