# Editframe

> Build video with code. HTML + CSS compositions with scripting and React support. Instant preview, hyperscale cloud rendering.

Editframe lets developers create and render videos programmatically using HTML, CSS, and JavaScript. Compositions are defined as web components or React components, previewed instantly in the browser, and rendered to MP4 in the cloud.

## Brand Video Generator

- [Brand Video Generator](https://editframe.com/skills/brand-video-generator.md): Generate video compositions from brand websites or descriptions. Produces an inspectable creative brief before generating HTML.
- [Brand Examples and Category Guidance](https://editframe.com/skills/brand-video-generator/brand-examples.md): Category-specific structural truths, false differentiators, and visual specificity examples for brand video generation.
- [Color Psychology for Video](https://editframe.com/skills/brand-video-generator/color-psychology.md): Emotional associations and strategic use of colors in branded video, with palette selection guidance for key moods.
- [Composition Patterns](https://editframe.com/skills/brand-video-generator/composition-patterns.md): Video composition patterns where motion is structural — not decorative. Each pattern includes the animation that makes it work.
- [Editing — What to Cut](https://editframe.com/skills/brand-video-generator/editing.md): How to recognize when a scene is not doing work, when a video is complete versus merely finished, and the discipline of omission.
- [Emotional Arcs for Video](https://editframe.com/skills/brand-video-generator/emotional-arcs.md): Proven narrative arc structures for guiding viewer emotion through a video: tension, release, and resolution patterns.
- [Genre Selection](https://editframe.com/skills/brand-video-generator/genre-selection.md): Full genre palette for brand video — formal characteristics, appropriate contexts, and compositional implications for each genre.
- [Transition Styles](https://editframe.com/skills/brand-video-generator/transition-styles.md): Types of video transitions — cut, dissolve, wipe, and motion — their emotional impact, and when to apply each.
- [Typography Personalities](https://editframe.com/skills/brand-video-generator/typography-personalities.md): What font choices communicate about brand personality and how to pair typefaces effectively in video title sequences.
- [Video Archetypes by Industry](https://editframe.com/skills/brand-video-generator/video-archetypes.md): Common video narrative archetypes — explainer, testimonial, product demo, and more — with structure and pacing guidance.
- [Video Fundamentals](https://editframe.com/skills/brand-video-generator/video-fundamentals.md): Essential video storytelling concepts — transitions, emotional arcs, pacing, and brand identity — for composition planning.
- [Visual Metaphors](https://editframe.com/skills/brand-video-generator/visual-metaphors.md): Reference for translating abstract concepts into concrete visual metaphors for use in brand video storytelling.

## Composition

- [Composition](https://editframe.com/skills/composition.md): Build video compositions with Editframe. Use HTML web components or React. Add video, audio, images, text, captions, and transitions, then render to a file.

## Dev Server

- [Dev Server](https://editframe.com/skills/dev-server.md): Local dev server for Editframe compositions. Adds on-demand video transcoding, local asset serving, and URL signing with no cloud dependency, through the Vite plugin, the Next.js plugin, or the framework-agnostic dev-server package.

## Editframe Api

- [Editframe Api](https://editframe.com/skills/editframe-api.md): JavaScript/TypeScript SDK and CLI for Editframe's video rendering API. Create renders, upload and process video, image, and caption files, transcribe audio, sign URLs for browser playback, and render or preview compositions from the command line.

## Editframe Create

- [Editframe Create](https://editframe.com/skills/editframe-create.md): Scaffold a new Editframe video project from a template. This generates the project structure, installs dependencies, and sets up composition tooling to start immediately.

## Editor Gui

- [Editor Gui](https://editframe.com/skills/editor-gui.md): Build video editing interfaces with Editframe's GUI components. Assemble a timeline, scrubber, canvas, preview, playback controls, and transform handles into a custom editor. Use this for a timeline, scrubber, preview, playback control, volume control, mute button, fullscreen toggle, picture-in-picture toggle, resolution picker, trim handle, or hierarchy panel.

## Motion Design

- [Motion Design](https://editframe.com/skills/motion-design.md): Professional motion graphics for video content — animations, transitions, title sequences, and time-based visual design for video production.

## Webhooks

- [Webhooks](https://editframe.com/skills/webhooks.md): Webhook notifications for render completion and file processing events. Configure an endpoint, verify HMAC signatures, and handle real-time status payloads.