Built for Remotion workflows

Edit Remotion visually.Keep control of the code.

MotionForge turns explicitly declared TSX properties into a focused visual interface, while every hook, expression, and line of React logic stays under developer control.

Get started Explore the editor Read documentation

Exact-range updatesReal Remotion runtimePredictable diffs

MOVEATSOURCESPEED.

Text property

Reveal the headline word by word.

Explicit by design

Declare the surface. Keep the system.

The developer decides what can be changed. MotionForge maps those declarations to precise controls instead of inferring intent from arbitrary React.

property.text()

Text input with a validated string literal

property.color()

Color control backed by a literal value

property.number()

Numeric input with optional bounds

tsx

export default defineMotionComposition({
  id: "LaunchCard",
  properties: {
    title: property.text({
      defaultValue: "Launch faster",
    }),
    accent: property.color({
      defaultValue: "#8B5CF6",
    }),
    scale: property.number({
      defaultValue: 1,
      min: 0.8,
      max: 1.2,
    }),
  },
  render: LaunchCard,
});

A strict boundary

Visual editing without giving up the source code

Traditional editors tend to own their output. MotionForge owns only the small, explicit surface you hand to it.

Editable by MotionForge

Validated

Text and color literals
Numbers and animated numbers
Booleans and select values
Properties declared with property.*()

Owned by the developer

Untouched

Hooks and runtime expressions
Imports and JSX expressions
Conditionals, styles, and calls
Arbitrary React logic

MotionForge never guesses developer intent and never rewrites unsupported code.

Structure-aware parsing

AST validation identifies declared literals and rejects unsafe expression shapes.

Predictable diffs

Only the exact source range of a validated literal is updated.

Live preview

A short-lived Vite session refreshes the selected composition with HMR.

Unsupported reporting

Expressions stay intact and appear as developer-controlled values.

Source ownership

Formatting, neighboring code, imports, and control flow remain yours.

Real runtime

The composition mounts inside @remotion/player, not a visual approximation.

Round trip

From declaration to exact-range update

A deliberately narrow pipeline keeps visual editing understandable, reviewable, and safe.

Declare editable properties

Use defineMotionComposition() and property.*() to expose a controlled set of literals.

→

Open the composition

MotionForge parses declarations and creates matching visual controls.

→

Edit visually

Change text, color, numbers, and animated values in a focused inspector.

→

Keep coding

Validated literals update in place. The rest of the TSX remains unchanged.

TSX source↓

Property declaration parser↓

Visual controls↓

Exact-range source update

Source safety

Your code is not a generated artifact

MotionForge validates structure with an AST, but never treats arbitrary React as safe for automatic round-trip editing.

Traditional generator

Visual state → regenerate entire file

Manual changes can disappear
Large, unstable diffs
Generator lock-in
Application logic at risk

MotionForge

Validated property → update exact literal range

Predictable diffs
Formatting preserved
Developer-controlled code
Safe, targeted updates

Live preview architecture

A real runtime in an isolated loop

Entry source and preview files enter a short-lived Vite session. The editor talks to @remotion/player through a narrow message bridge.

Vite resolution

npm imports, relative files, and the @/ alias

Runtime alias

@motionforge/runtime wired through Vite

Transport controls

play(), pause(), and seekTo() via postMessage

Visible failures

TypeScript, import, bundler, and runtime errors

MotionForge Editor

source + files

↓

Preview Session / Vite

npm, files, aliases

↓

Sandboxed iframe

isolated execution

↓

@remotion/player

real composition runtime

frameupdate

postMessage ↕ frameupdate · Vite HMR

Syntax support

Literal values in. Runtime expressions stay yours.

Support is intentionally explicit. Unsupported means MotionForge leaves the expression under developer control—it does not mean the composition is broken.

tsx

property.text({
  defaultValue: "Launch faster",
})

tsx

property.color({
  defaultValue: "#7C3AED",
})

tsx

property.number({
  defaultValue: 24,
})

Built on tools developers already use

Next.jsReactTypeScriptViteRemotionTailwind CSSshadcn/uiZustandPrismaSQLite

The full workspace

Code, preview, properties, and time—one surface

Switch between Visual, Code, and Split views. Inspect declared properties while the timeline and isolated preview stay in sync.

launch-campaign.motionforge

Workspace synced

Scene 01 / Launch

Compose with control

Compose · Preview · Iterate

1import { interpolate } from 'remotion';

2import { defineMotionComposition, property } from '@motionforge/runtime';

4export default defineMotionComposition({

5 id: 'ProductLaunch',

6 properties: {

7 title: property.text({

8 defaultValue: "Compose with control",

9 }),

10 accent: property.color({

11 defaultValue: "#8B5CF6",

12 }),

13 scale: property.number({

14 defaultValue: 0.92, min: 0.8, max: 1.2

15 }),

16 },

17 render: ({ title, accent, scale }) => (

18 <LaunchCard {...{ title, accent, scale }} />

19 ),

20});

importedOptions cannot be edited visually · source left unchanged

048 / 150

SPACE

MP4 export UI is present; server-side rendering is not implemented yet.

Quick start

Run MotionForge locally

Start the editor and its isolated preview service with the repository's standard scripts.

Editor · :3000Preview · :4174

$ npm install
$ npm run db:push
$ npm run dev

For another origin, set NEXT_PUBLIC_MOTIONFORGE_PREVIEW_URL. Configure the bind address with MOTIONFORGE_PREVIEW_HOST and the port with MOTIONFORGE_PREVIEW_PORT.

package.json · scripts

npm run devDevelopment server

npm run buildProduction build

npm startStart standalone build

npm run checkLint, typecheck and tests

npm run db:pushSync Prisma schema to SQLite

FAQ

Clear boundaries, by design

What MotionForge edits, what it preserves, and what is still outside the product today.

Can MotionForge edit any React component?

No. MotionForge edits only properties explicitly declared through defineMotionComposition() and property.*(). Arbitrary component logic remains read-only.

Why require explicit property declarations?

Declarations create a predictable editing boundary. They tell the editor exactly which values are safe to expose and update.

Does the editor rewrite my entire TSX file?

No. It validates the source structure and updates only the exact literal range tied to a declared property.

Which property types are supported?

Text, color, number, animated number, boolean, and select values are supported when their configuration uses supported literals.

Does preview use the real Remotion runtime?

Yes. The selected composition is mounted in @remotion/player inside an isolated preview session.

Can it resolve local files and npm imports?

The Vite preview service resolves npm imports, relative preview files, the @/ alias, and @motionforge/runtime through an alias.

Is preview code isolated?

Preview code runs in a sandboxed iframe backed by a short-lived preview session. Editor controls communicate through postMessage.

Does MotionForge support MP4 export?

The MP4 export interface exists, but server-side rendering is not implemented yet. The UI does not imply a completed render pipeline.

Can I save projects and templates?

Yes. The current application includes persisted projects and template workflows backed by Prisma and SQLite.

Is MotionForge intended to replace a code editor?

No. It is a focused visual companion for declared composition properties, not a replacement for your IDE or normal TypeScript workflow.

Source stays source

Build visually. Ship real React code.

Define a safe editing surface, work with the composition visually, and keep using the TypeScript workflow you already trust.

Get started View repository