Alchemy cms
Photo-05

Build it your way. Let your team run it.

Alchemy is a content management system for Rails. You design the building blocks and own every line of markup — your editors add, arrange and publish pages without touching code.

Take the tour How this site is built

config/alchemy/elements.yml 
- name: hero
  unique: true
  hint: true
  ingredients:
    - role: headline
      type: Headline
      hint: true
      default: :hero_headline
      settings:
        levels: [1]
        sizes: [1, 2]
    - role: subheadline
      type: Text
      hint: true
      default: :hero_subheadline
    - role: cta
      type: Link
      hint: true
      default: "/pages"
      settings:
        text: Take the tour
    - role: secondary_cta
      type: Link
      hint: true
      default: "#how"
      settings:
        text: How this site is built
    - role: background_image
      type: Picture
      hint: true
      settings:
        size: 1600x600
        crop: true
        srcset: [800x300, 1600x600]
        sizes: ["100vw"]
    - role: background
      type: Select
      group: styling
      hint: true
      default: bg-surface
      settings:
        select_values:
          - ["Light blue", "bg-surface"]
          - ["Violet tint", "bg-surface-violet"]
          - ["White", "bg-white"]
    - role: filter
      type: Select
      group: styling
      hint: true
      default: ""
      settings:
        select_values:
          - ["None", ""]
          - ["Grayscale", "grayscale"]
          - ["Sepia", "sepia"]
          - ["Blur", "blur-sm"]
          - ["Dim", "brightness-75"]
          - ["Saturate", "saturate-150"]
Edit this element in the admin →

Everything you’d expect, already built in

Alchemy ships with what a real site needs, so you are not gluing it together yourself.

  • Media library

    Upload once, use anywhere. Crop an image differently for each place it appears without altering the original, and let the browser download only the size it needs.

  • Draft and publish

    Every page has a draft you work on and a published version visitors see. Nothing goes live until you say so.

  • Publish on a schedule

    Give a page a go-live date and an end date. Embargoed announcements and time-limited campaigns handle themselves.

  • Roles and restricted pages

    Members-only sections, internal pages, and editors who can only reach what they should.

  • Built for search engines

    Readable URLs, per-page titles and descriptions, robots settings, an automatic sitemap, and redirects that keep old links working when a page moves.

  • Languages and sites

    Run several languages, several domains, or several separate sites from one installation.

  • Menus and shared content

    Build navigation in the admin and reuse content across every page, the way this site’s own footer does.

  • JSON API

    Read your pages and elements as JSON — for a mobile app, a search index, or a separate frontend.

    See /api/pages

config/alchemy/elements.yml 
- name: feature_list
  unique: true
  hint: true
  nestable_elements:
    - feature_item
  ingredients:
    - role: headline
      type: Headline
      as_element_title: true
      hint: true
      default: :feature_list_headline
      settings:
        levels: [2, 3]
        sizes: [2, 3]
    - role: lead
      type: Richtext
      hint: true
      default: :feature_list_lead
      settings:
        tinymce:
          toolbar: "bold italic | alchemy_link unlink"
        sanitizer:
          tags: [p, br, strong, em, a]
          attributes: [href, target, rel, title]
Edit this element in the admin →

How Alchemy is put together

Concept-pages

Pages & Page Layouts

Each page follows a layout that decides which blocks it can hold. Freedom where you want it, guardrails where you don’t.

Learn more

Concept-elements

Elements

The building blocks. Define one once, reuse it on any page, render it with your own template.

Learn more

Concept-ingredients

Ingredients

The fields inside a block: text, rich text, pictures, links, dates. Each knows what it is, so editors get the right input for it.

Learn more

config/alchemy/elements.yml 
- name: concept_grid
  unique: true
  hint: true
  nestable_elements:
    - concept_card
  autogenerate:
    - concept_card
    - concept_card
    - concept_card
  ingredients:
    - role: headline
      type: Headline
      hint: true
      default: :concepts_headline
      settings:
        anchor: concepts
        levels: [2, 3]
        sizes: [2, 3]
Edit this element in the admin →
Concept-inspect

Curious how this page works?

This whole site is an Alchemy site — none of it is hardcoded. On any block, choose “How this block is built” to see its real definition, then jump straight into the admin and change it.

config/alchemy/elements.yml 
- name: image_text
  hint: true
  ingredients:
    - role: image
      type: Picture
      hint: true
      settings:
        size: 640x480
        srcset: [320x240, 640x480]
        sizes: ["(min-width: 768px) 50vw", "100vw"]
    - role: headline
      type: Headline
      as_element_title: true
      hint: true
      default: :image_text_headline
      settings:
        levels: [2, 3]
        sizes: [2, 3]
        anchor: how
    - role: text
      type: Richtext
      hint: true
      default: :image_text_text
      settings:
        tinymce:
          toolbar: "bold italic | alchemy_link unlink"
        sanitizer:
          tags: [p, br, strong, em, a]
          attributes: [href, target, rel, title]
    - role: layout
      type: Select
      group: styling
      hint: true
      default: "md:flex-row"
      settings:
        select_values:
          - ["Image left", "md:flex-row"]
          - ["Image right", "md:flex-row-reverse"]
Edit this element in the admin →

Have a go

The admin is open: sign in as demo / demo123 and edit anything you see here.

Open the admin

config/alchemy/elements.yml 
- name: cta
  unique: true
  hint: true
  ingredients:
    - role: headline
      type: Headline
      hint: true
      default: :cta_headline
      settings:
        levels: [2, 3]
        sizes: [2, 3]
    - role: text
      type: Richtext
      hint: true
      default: :cta_text
      settings:
        tinymce:
          toolbar: "bold italic | alchemy_link unlink"
        sanitizer:
          tags: [p, br, strong, em, a]
          attributes: [href, target, rel, title]
    - role: button
      type: Link
      hint: true
      default: "/admin"
      settings:
        text: Open the admin
    - role: background
      type: Select
      group: styling
      hint: true
      default: bg-accent
      settings:
        select_values:
          - ["Accent violet", "bg-accent"]
          - ["Ink", "bg-ink"]
    - role: button_style
      type: Select
      group: styling
      hint: true
      default: "bg-white text-accent-dark"
      settings:
        select_values:
          - ["Light button", "bg-white text-accent-dark"]
          - ["Dark button", "bg-ink text-white"]
Edit this element in the admin →