Neonix

HTML authoring

HTML projects are compiled into the same Neonix project model used by the editor, preview and export flows. The document metadata defines the video composition; the browser page around it is only a convenient authoring surface.

Required document metadata

Every HTML project must contain exactly one <meta name="neonix-document"> tag. Its JSON value declares the composition contract:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="neonix-document"
      content='{"kind":"neonix-html-document","schemaVersion":2,"composition":{"width":1080,"height":1080,"fps":30,"background":"#081018","colorSpace":"srgb"}}'
    />
  </head>
  <body>
    <main class="scene">
      <h1>Neonix</h1>
      <p>HTML to editable motion.</p>
    </main>
  </body>
</html>

The following values are required:

  • kind must be neonix-html-document.
  • schemaVersion must be 2.
  • composition.width, composition.height and composition.fps must be positive numbers.
  • composition.background must be a valid color.
  • composition.colorSpace must be srgb.

Composition size and body CSS

The composition metadata is the source of truth for preview and export. You do not have to set body to the same pixel dimensions, and the compiler does not infer the video size from body CSS.

For a document that should also look correct when opened directly in a browser, use a fluid page shell and let the composition define the render viewport:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  position: relative;
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
}

If an element paints outside the composition rectangle, the exported frame remains the declared composition size and the outside area is cropped. Set explicit dimensions on individual elements when their layout depends on a fixed design grid.

Supported authoring surface

Use ordinary HTML and CSS for the supported compiler subset:

  • semantic elements such as div, section, main, headings and paragraphs;
  • CSS colors, opacity, borders, rounded corners, gradients, transforms and animation declarations supported by the compiler;
  • local or Neonix system-font URLs for deterministic text layout;
  • images and other media through the asset references supported by the HTML compiler.

The compiler validates the document before creating a project. Browser-only behavior such as event handlers, network-dependent layout, canvas state or arbitrary JavaScript is not part of the deterministic export contract.

HTML elements that are supported

Use only the following visual HTML vocabulary. Tags are grouped by their authoring role:

RoleSupported tags
Documenthtml, head, meta, title, style, body
Containersdiv, main, section, article, header, footer, nav, aside, figure, figcaption
Texth1–h6, span, p, strong, b, em, i, small, br, blockquote, pre, code
Mediaimg, video, audio
SVGsvg, g, path, rect, circle, ellipse, line, polyline, polygon

Use a supported container or span instead of inventing a custom visual tag. Give important elements a stable id; ids must be unique.

CSS properties currently supported

The following property groups are available for HTML authoring. The value still has to use the documented syntax for that property.

CategoryProperties
Layout and boxposition, position-anchor, anchor-name, inset, top, right, bottom, left, width, height, min-width, max-width, min-height, max-height, aspect-ratio, margin and padding longhands, box-sizing
Visibility and orderdisplay, visibility, opacity, overflow, z-index
Paint and bordersbackground, background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, color, border and border longhands, border-radius, outline and outline longhands
Textfont-family, font-size, font-weight, font-style, font-stretch, line-height, letter-spacing, word-spacing, white-space, text-align, direction, writing-mode, text-decoration, text-overflow, text-rendering, text-shadow
Transformtransform, transform-origin, perspective, perspective-origin, transform-style, backface-visibility
SVG paintfill, fill-opacity, fill-rule, stroke, stroke-width, stroke-opacity, stroke-linejoin, stroke-linecap, stroke-dasharray, stroke-dashoffset, paint-order
Mediaobject-fit, object-position, image-rendering
Flex and gridflex-direction, flex-wrap, justify-content, justify-items, align-items, align-self, align-content, place-items, gap, row-gap, column-gap, flex, flex-basis, flex-grow, flex-shrink, order, grid-template-columns, grid-template-rows, grid-column/grid-row and their start/end fields
Motion and effectsanimation, animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, animation-timing-function, filter, backdrop-filter, mix-blend-mode, isolation, clip-path, mask-image, mask-position, mask-size, mask-repeat, mask-mode, mask-composite, offset-path, offset-distance, offset-rotate, offset-anchor

Common supported value forms include px, percentages, em, rem, vw, vh, auto, arithmetic calc(), min(), max() and clamp(), when they are valid for the selected property. Use solid colors, supported gradients, documented transform functions and deterministic animation timing values.

Selectors and CSS resources

Supported selectors are tag selectors, class selectors, id selectors, descendant selectors and comma-separated selector lists. CSS custom properties and var() fallbacks are supported when their values resolve to a supported property.

Put CSS in an inline <style> block in the same HTML document. External stylesheets, inline style="..." attributes, pseudo-classes, pseudo-elements, attribute selectors, child/sibling combinators (>, +, ~) and media queries are not part of the current authoring contract.

Deliberately unsupported browser features

Do not ask an AI to generate these for a Neonix video document:

  • <script>, event handlers, forms, inputs, buttons, iframes or canvas drawing;
  • ::before, ::after and CSS content;
  • browser interaction, hover/focus state, responsive media-query branches or network-dependent layout;
  • arbitrary HTML tags outside the allowlist;
  • CSS declarations or selector syntax outside the supported vocabulary.

For generated text or decorations, use real elements instead of CSS-generated content:

<div class="badge">
  <span class="badge-label">Neonix</span>
</div>

This makes text, shapes and animation explicit and keeps the document predictable for preview, validation and export.

AI generation checklist

Before calling the HTML project tool, an AI should:

  1. Use exactly one neonix-document metadata tag.
  2. Use only tags from the element table above.
  3. Put all CSS in an inline <style> block.
  4. Use real HTML elements for every visible text or decoration.
  5. Use only listed CSS properties and supported value forms.
  6. Give important visual elements unique ids.
  7. Avoid scripts, pseudo-elements, external stylesheets and browser-only behavior.
  8. Validate the complete HTML and fix the first diagnostic before creating or exporting the project.

Fonts

For stable preview and export, use a font from the Neonix system font CDN and declare it explicitly:

@font-face {
  font-family: "Inter";
  src: url("https://fonts.neonix.video/inter/Inter_18pt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", sans-serif;
}

Keep the font family, weight and style explicit. Avoid relying on a user's installed fonts or loading a font from an unpinned external provider.

Import from the dashboard

Choose Import HTML on the dashboard, enter a project name, then upload an .html file or paste the document. The import uses the same validation and compilation path as the API and opens the new project preview when it succeeds.

Create from an authenticated product surface

Use Import HTML on the dashboard to create a project from an HTML file or pasted document. AI clients can create projects through the authenticated Neonix MCP connection. Both paths use the same validation and compilation flow, then open the project in preview for refinement and export.

The underlying project APIs require an authenticated integration and are intentionally not documented on this public guide.

Validate before importing

When a document is rejected, fix the first diagnostic before retrying. Common causes are a missing or duplicated metadata tag, invalid JSON in the content attribute, unsupported CSS, or a font/media reference that cannot be resolved.

For an interactive compiler test, open the compiler playground, or see HTML to Motion Video for a product overview of the pipeline. For the authoring contract, continue with Compiler and Output.