# Create HTML App
> Create or update a Hubble HTML App: a folder-local .html file Hubble runs as a self-contained interactive UI, with Alpine, Tailwind, Hubble theme tokens, and the injected hubble runtime API.
- Skill: `bholmesdev/create-html-app` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add bholmesdev/create-html-app`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bholmesdev/create-html-app/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: bholmesdev (https://skillmd.com/u/bholmesdev)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bholmesdev/create-html-app
---
# Create HTML App
A Hubble HTML App is a folder-local `.html` file Hubble runs as a self-contained interactive UI. Opening it shows the app in the main content panel. Build any interactive experience — a tool, dashboard, or app — as a single `.html` file in the Folder.
To embed an HTML App inline inside a Markdown File, see `create-embed`.
## Runtime
Hubble provides the app runtime. Write plain HTML that assumes these globals are already available:
- `hubble`
- `Alpine`
- Tailwind browser v4
- Hubble theme tokens
Use Alpine and Tailwind by default. Do not add dependency `
…
```
Why this beats large inline expressions:
- Alpine parses `x-data` as a single expression. Multi-line bodies with arrow functions, object methods, or `<`/`>`/`&` get HTML-escaped or mis-parsed, surfacing as silent "Alpine Expression Error" failures.
- Logic lives in real JavaScript with syntax highlighting and normal quoting, not inside an attribute string.
- Components are reusable and testable, and keep markup readable.
Register components inside `alpine:init` so they exist before Alpine scans the DOM.
## Native Feel
Use Hubble tokens through Tailwind classes so the app feels native:
- Surfaces: `bg-background`, `bg-card`, `bg-popover`
- Text: `text-foreground`, `text-muted-foreground`, `text-card-foreground`
- Borders/rings: `border-border`, `border-input`, `ring-ring`, `focus-visible:ring-ring`
- Actions: `bg-primary text-primary-foreground`, `bg-secondary text-secondary-foreground`
- States: `hover:bg-accent`, `bg-selected text-selected-foreground`
Keep spacing compact: `gap-2`, `gap-3`, `p-2`, `p-3`, `px-3`, `py-2`. Use `rounded-sm` or `rounded-md` for controls.
Avoid one-off palettes, oversized cards, hero layouts, and decorative gradients unless the user asks for a themed visual.
## References
Read only the patterns you need:
- [Files API](references/files-api.md)
- [Buttons](references/buttons.md)
- [Radio selects](references/radio-selects.md)
- [Tabs](references/tabs.md)
- [Forms](references/forms.md)
- [Lists and empty states](references/lists-and-empty-states.md)