Templates

Available templates when running npm create @editframe.

html

Minimal HTML/CSS/JavaScript starter. Best for web component compositions.

my-project/
├── index.html          # Composition markup
├── src/
│   ├── index.js        # Imports Editframe elements
│   ├── styles.css      # Tailwind CSS
│   └── assets/         # Media files
├── package.json
├── vite.config.ts
└── tailwind.config.js

Dependencies: @editframe/elements, @editframe/cli, @editframe/vite-plugin, tailwindcss, vite

react

Minimal React/TypeScript starter. Best for React-based compositions.

my-project/
├── index.html
├── src/
│   ├── main.tsx        # Entry point with TimelineRoot
│   ├── Video.tsx       # Composition component
│   ├── styles.css      # Tailwind CSS
│   └── assets/         # Media files
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js

Dependencies: @editframe/react, @editframe/cli, @editframe/vite-plugin, react, tailwindcss, vite

simple-demo

HTML demo with sample assets and CSS animations. Good starting point to see elements in action.

card-poetry

HTML demo with card assets (images, audio, captions), waveform visualization, and keyframe animations.

react-demo

React version of the card-poetry demo using @editframe/react components and the useTimingInfo hook.

animejs

AnimeJS integration demo showing text stagger, timeline animation, WAAPI, and SVG motion paths integrated with Editframe's timeline via addFrameTask.

Common Structure

All templates include:

• Vite build system with @editframe/vite-plugin
• Tailwind CSS for styling
• npm start runs editframe preview for live development
• src/assets/ directory for media files (video, audio, images)
• .gitignore configured for Node.js projects