aftercode.Get early access

THE AFTERCODE TOOLKIT IN DEVELOPMENT

The editor that
follows your code.

Your site already has a design, components, and content. Aftercode brings them into a visual editing workflow, with AI helping the CMS make sense of what's there.

Get early access See it in action

THE AI IS IN THE CMS, TOO

It understands
what your content
is for.

An array of people. A category ID in YAML. A string used as a design option. Aftercode uses Jev to read the context and work out how that content should be edited.

That opens up a richer CMS: repeatable items you can add and remove, linked entries you can choose by name, and controls that fit the job.

Try the interactions
ORDINARY SOURCE. A MORE CAPABLE CMS.
src/data/team.json
{
  "team": [
    {
      "name": "Jamie Lee",
      "role": "Designer"
    },
    {
      "name": "Alex Morgan",
      "role": "Developer"
    }
  ]
}

A list of objects becomes a repeater. Each item keeps its own fields, identity, and place in the list.

ARRAY OF OBJECTS → REPEATER

The people behind the work

Inferred UI
Team members 2ADD · EDIT · REORDER · REMOVE
01
Jamie LeeDesigner
02
Alex MorganDeveloper

Try duplicating a person, changing their name, or removing everyone.

src/content/journal/studio.md
---
title: "A little room for good ideas"
categories: ["design","studio-life"]
---
CONNECTED COLLECTION · CATEGORIES
designDesign
studio-lifeStudio life
processOur process
field-notesField notes

Shared values and the way the project uses them can reveal a relationship. Category IDs stay in the YAML; readable names belong in the editor.

YAML VALUES → COLLECTION RELATIONS

A journal entry

Inferred UI
Text
CategoriesMultiple relations
DesignStudio life

Choose “Our process”. The source keeps the ID “process”.

src/pages/index.astro
<Hero
  align={"left"}
  font={"Instrument Sans"}
  space={"24px"}
  accent={"#c65c35"}
/>
STORED TYPEstring ≠ text box

Meaning decides the interaction.

All four values are strings. Their use in the component and the project's design options suggest different controls. The source keeps its original value types.

COMPONENT CONTEXT → USEFUL CONTROLS

The same type. Different jobs.

Exploring sliders, comboboxes, and color controls.

FORM & FIELD

Room for good ideas.

A small change. A different feel.

Move the slider. Its value stays a string like “32px”.

Content stays structured. Editing becomes human.INTERACTIVE PRODUCT DIRECTION

Prepared, local examples of the experience we're building. Advanced controls are exploratory; no AI request or project write happens here.

01 / THE STRUCTURE

A list becomes something you manage.

Create another item. Edit it. Move it up. Remove it. A repeater keeps the structure of the original array.

02 / THE RELATIONSHIPS

“studio-life” becomes “Studio life”.

Project context can connect a stored ID to an entry in another collection. The editor can show a name and a picker.

03 / THE MEANING

A string can do more than fill a box.

Known choices can become a select. Design values can suggest a slider or color control. The meaning matters alongside the type.

THE LAST FEW DETAILS ARE YOURS

Less back-and-forth.
A little more “there.”

Change the heading. Nudge the type. Try another color. Use the controls below, then switch to the client view to see how the editing surface changes.

One place. Your view, and theirs.

Go on. Change something.
AftercodeForm & FieldLocal project
Home index.astroDesktop
form&field®Our work About us
INDEPENDENT DESIGN STUDIO
Heading

Good things.
Made together.

Thoughtful identities and digital experiences.
For people doing things a little differently.

A few things we've made
Visual control, right alongside your code.INTERACTIVE CONCEPT
Your eye. Your decisions. Your actual Astro project.Demo only. Changes stay in this page.

THE WHOLE WORKFLOW MATTERS

The big idea.
And the everyday details.

These are the capabilities we're building around. The hosted SaaS is in development; client access and publishing are planned.

Meaning becomes an interface

Turn arrays into repeaters, stored IDs into readable relationships, and meaningful values into useful controls. Try adding and removing items in the demo.

AI RECOGNITION

The visual finishing pass

Work on typography, spacing, and content while looking at the page. Give the last few decisions your own attention.

VISUAL EDITING

A full content workflow

Create, edit, and delete posts, projects, and categories. Choose media and related content, preview the result, and publish the next update.

CLIENT CMS DIRECTION

An ordinary Astro project

Keep components, styles, and content in your own project. Your agent and your editor work with the same source.

YOUR FILES

Your choice of coding agent

Build in the tools you already use. Aftercode joins the workflow when you want to make visual and content changes.

LOCAL DEVELOPMENT

Room to change your mind

The editing workflow is being built with undo and source-aware writes, so a small experiment can stay a small experiment.

IN DEVELOPMENT

Sections clients can use

Choose which components and sections belong in the client workspace. Keep your design system involved in every update.

PLANNED FOR CLIENT WORKSPACES

A role for each person

Developers manage the project. Editors manage content, media, and approved sections, with a preview before publishing.

PLANNED FOR CLIENT WORKSPACES

A site you can take with you

Published content and media belong with the project. The product is designed so the site can keep building if you leave.

PRODUCT COMMITMENT

ONE PROJECT. TWO WAYS IN.

On your machine.
Then in their browser.

You build locally. Your client needs to keep working after you close your laptop. The hosted workflow is designed around that handoff.

Explore the planned connection modes
Your Astro projectLocal files + your coding agent
AftercodeVisual adjustments + content editing
Your real pageSee the details as you work

Your local development server connects the project to the editor. Your normal files remain the working source.

Your client's browserContent, media + approved sections
Connected repositoryGitHub + a hosted preview
The published siteBuild + deploy through Cloudflare

Planned hosted workflow: edit, preview, and publish independently of the developer's computer.

WORKFLOW ILLUSTRATION · HOSTED CONNECTIONS ARE PLANNED

THEIR CONTENT. THEIR NEXT UPDATE.

Go to Aftercode.
Change it yourself.

Your client has a new story, a new project, or a photo to replace. Give them a CMS that understands the content they work with.

They can create entries, edit the details, choose related categories, and remove what they no longer need. Then check the page and publish their update.

  • Content, media, and connected collections
  • A preview of the page before publishing
  • A browser workspace that works while your laptop is closed
Get early access HOSTED CLIENT WORKSPACES ARE ON THE ROADMAP
AftercodeForm & FieldDEMO WORKSPACE
JL Jamie Editor
  1. 01 Your content
  2. 02 Make a change
  3. 03 Check the page
  4. 04 Publish
YOUR NEXT UPDATE STARTS HERE

Journal

Add a story, revisit a draft, or update something that's already live.

ENTRYSTATUS

Try “A little room for good ideas”, or create your own story.

Interactive client concept. Choose an entry to try the workflow.
Designed to work while the developer's laptop is closed.HOSTED CLIENT WORKFLOW · PLANNED

Remove this demo entry?

This is an interactive illustration of the planned client CMS. Changes live only in this page and reset on reload. No account, AI call, repository, or deployment is connected.

AFTERCODE · IN DEVELOPMENT

Make room for what comes after.

Build with your agent. Finish with your eye. Give your clients a place of their own.

Get early access Explore the CMS