framulus

Programmable visual content

Build slides
like software.

Canvas, code and your AI tools. One editable document.

Start creating See how it works
01 / Compound growth
Smallamounts,compounded.
£200 a month, left alone for thirtyyears at 7%. The line is not themoney you put in.
£244,000After 30 years
£72,000Actually paid in
Start the habit →

1080 × 1920 · 9 layers

What it is

A visual programming environment for content.

  • 01

    Visual editing

    Drag, align and restyle.

  • 02

    Code

    Editable markup and CSS.

  • 03

    Your AI

    Connect Codex, Claude Code or another MCP client.

  • 04

    Systems

    Components, tokens and reusable templates.

Design + code

Design visually. Control everything.

Drag an element or edit its CSS. Try it below.

Canvas
1080 × 1350

.button·150, 900

frame.css
6 layers

Try background: #11100E on .card.

Presets and primitives

Real elements, not pictures of them.

Editable layers, charts, equations and music notation.

  • Worth knowing
    The code is how you author. The export is pixels.
    CalloutA box, a rule, an icon and two text layers
  • Ada Okonkwo
    Design engineer
    Berlin, since 2021
    ProfileAvatar, name, role, one line more
  • Field notes, No. 4
    What the picture shows, and why it is here.
    Image cardThe picture here is an imported SVG
  • 2021
    The idea
    2023
    First version
    2025
    In use every day
    TimelineAcross a wide slide, down a tall one
  • Studio
    $12
    per month
    Unlimited slides
    Export at the scale you need
    Templates you can share
    Choose Studio
    Pricing cardName, price, features and one button
  • -10-5510-1.0-0.50.51.0
    Function graphPlotted from y = sin(x), not pasted
  • Layeredgrounds.
    Background layersGlows and grain over the ground, as CSS

Markup to slide

Markup you can read. A slide you can see.

  • <Button className="cta">  Start creating  →</Button>
    Start creating →
  • <Chart  className="chart"  chartType="bar"  data={[18,24,31,29,44,52,61,58,79,96,118,164]}  accent="var(--color-primary)"/>
  • <Equation  className="equation"  latex="\\int_0^1 x^2 \\, dx = \\frac{1}{3}"/>
    ∫01x2 dx=13\int_0^1 x^2 \, dx = \frac{1}{3}
  • <Music  className="triad"  keySignature="C"  timeSignature="none"  clef="treble"  staffSize={88}  accent="var(--color-primary)">  <Measure>    <Chord id="c1" duration="whole" symbol="C">      <Note id="n1" pitch="C4" />      <Note id="n2" pitch="E4" />      <Note id="n3" pitch="G4" />    </Chord>  </Measure>  <Label id="a1" target="n1" placement="right">Root</Label>  <Label id="a2" target="n2" placement="right">Major 3rd</Label>  <Label id="a3" target="n3" placement="right">Fifth</Label></Music>

AI, over MCP

Connect your AI. Let it work on the same document you do.

Every AI change is editable and undoable.

  1. Connect

    Use Codex, Claude Code or another MCP client.

  2. Direct

    Ask your assistant to work on the open document.

  3. Refine

    Edit the result on the canvas or in code.

Model usage stays with your AI provider. Hosted assistants require a reachable deployment. The ChatGPT app is not published yet. How to connect

ConsoleCodex
  1. Codex connected
  2. get_contextCodexProject "Music Theory", slide 2 of 2, "Triads"
  3. apply_operationsCodex2 operations: Added a labelled C major triad.
  4. Updated .title
    fontSize
    64→80
    Added Music .triad
    Treble clef, 3 notes, 3 annotations
    at 96, 360
  5. select title
  6. set font-size 72
  7. Updated .title
    fontSize
    80→72
An example session: an agent's calls and your commands, in one log

Formats

Built for vertical content. Flexible when you need more.

  • Vertical1080 × 1920
  • Portrait1080 × 1350
  • Square1080 × 1080
  • Landscape1080 × 608
  • Widescreen1920 × 1080
  • Standard1600 × 1200
  • A4 landscape1123 × 794
  • A4 portrait794 × 1123
Explainer / 03
What isan indexfund?
One purchase that quietly buysa slice of every company onthe list. No stock picking.No manager to pay.
03
Educational5 layers
Launching today
Versiontwo ishere.
v2.0.0 + offline mode+ shared folders+ faster sync
Read the notes →
Product launch5 layers
Data / Q4
Four years,one line.
+811%Revenue, 2021 → 2024
Data story4 layers
I stoppedredesigning thesame buttonfor every post.
Ada Okonkwo
Design engineer
Personal brand5 layers
Seed round
We raised$4.2M.
To build the tools ourcustomers kept askingus for.
Led by our seed fundWith angels from our community
Announcement5 layers
How it works
Code in.Pixels out.
<Chart className="growth" chartType="line" />
Visual explainer7 layers

Export

Programmable in. Pixels or vectors out.

PNG, JPG
1× free. Up to 4× with Studio.
PDF
All slides, with vector text and shapes.

  1. Create

    A preset, a template, a component, or an empty slide.

  2. Compose

    Canvas, code and Console, on the same document.

  3. Export

    PNG or JPG at the scale you choose, or a vector PDF.

Pricing

Free to make. Studio to finish.

Higher-resolution exports, Studio resources and shared templates.

  • Free

    $0

    no card needed

    • Unlimited projects and slides
    • Canvas, code panel and Console
    • Text, shapes, images, charts, graphs, equations and notation
    • Design systems, effects, master slides and variables
    • Clean PNG and JPG at 1×, and PDF. No watermark, ever
    • Workspaces, roles and project sharing
    • Connect Codex, Claude Code and other MCP clients
    Start creating

  • Studio

    €17.99

    per editor / month

    • Everything in Free
    • Up to 4× PNG and JPG, including custom scales
    • Studio presets
    • Studio design systems
    • Workspace and public templates
    Subscribe to Studio

Build something worth scrolling for.

Start creating Browse examples

Free to start · no card needed