Devtool Clean
Code, terminals, and an SDK workflow in one continuous camera move. Sample: Acme SDK.
The original source-editing SDK demo.
Copy the prompt into your coding agent. Choose a complete product example, then adapt its React surfaces, content, brand, and assets while preserving the shared timeline.
Install manually
pnpm create odori@latest my-video
cd my-video
pnpm install
pnpm dlx @odori/cli@latest add template acme-launch
node videos/acme-launch/select-variation.mjs editor
pnpm dlx @odori/cli@latest devnpm create odori@latest my-video
cd my-video
npm install
npx @odori/cli@latest add template acme-launch
node videos/acme-launch/select-variation.mjs editor
npx @odori/cli@latest devyarn dlx create-odori@latest my-video
cd my-video
yarn install
yarn dlx @odori/cli@latest add template acme-launch
node videos/acme-launch/select-variation.mjs editor
yarn dlx @odori/cli@latest devbun create odori@latest my-video
cd my-video
bun install
bunx @odori/cli@latest add template acme-launch
node videos/acme-launch/select-variation.mjs editor
bunx @odori/cli@latest devRead ADAPTATION.md in the installed template. Edit selected-input.ts for content and use the schema named in the guide for limits.
Code
videos/acme-launch/video.tsx
import {layout} from "./layout";
import Composition, {metadata as compositionMetadata} from "./composition";
import {selectedInput} from "./selected-input";
import {inputSchema as inputSchema} from "./template-schema";
/** The same editable input drives the gallery, Studio, and installed video. */
export const metadata = {...compositionMetadata, layout, schema: inputSchema, defaultProps: selectedInput};
export default function Template(props: Record<string, unknown> = {}) {
return <Composition {...inputSchema.parse({...selectedInput, ...props})} />;
}