What the demo shows
Halo's AI agent builds two real website sections — an Introduction block and a Destination Cards grid — entirely from Halo's freeform canvas editor, with no hand-written code. A designer would assemble an entire website this way in Halo: section by section, page by page, from visual primitives to a live, production-hosted site.
How it was recorded
A Playwright automation script drives the browser in real-time. The agent clicks through Halo's canvas palette to place design primitives — sections, columns, headings, text, images, badges, links — then configures every style property: fonts, colors, spacing, layout, aspect ratios, and link targets. Each primitive is placed individually, the same way a human designer would drag components onto a canvas.
The level of design control
The canvas exposes 47 primitive types across layout, content, form, interactive, media, and utility categories. Every property you'd set in a design tool is available: fonts, exact padding values, column gaps, image aspect ratios, background overlays with positioning, letter spacing, text transforms — every CSS property that makes the design production-ready.
Halo's primitive library goes beyond static layouts: full-bleed hero videos with autoplay, mute controls, and custom aspect ratios are first-class primitives, assembled and configured the same way as any other element.
Responsive design, built in
Every canvas design works across three breakpoints: desktop (1440px), tablet, and mobile. Designers work at desktop scale, then override specific properties at smaller breakpoints — stack columns vertically on mobile, reduce font sizes on tablet, hide decorative elements on small screens. Styles cascade downward, so you only define what changes. One design, three layouts, no duplication.
From canvas to CMS component
Once the design looks right on the canvas, the agent clicks “Save as Component.” Halo's four-step wizard automatically detects the content fields (headings, body text, images, links) and style options (background color, padding) from the primitive tree. One click, and the freeform design becomes a registered CMS component — with a content type, editable fields, and configurable style variants. The canvas is the engineering.
What this means for hotels
From component to live site
Halo handles everything after design. Content editors populate components through the structured CMS or even directly in the Canvas with role-based permissions enforced. Pages are composed from a component library with drag-and-drop slot placement. Design tokens ensure brand consistency across every page. SEO and GEO optimization — meta descriptions, structured data, sitemaps, localized content — are configured per page and per locale. Multi-lingual sites are powered by AI translations that enforce the brand's tone of voice, with optional human-in-the-loop approval before publishing.
When the site is ready, one-click deployment publishes to staging for approval, then production with no DevOps pipeline, no build configuration, and no engineering handoff.
Design by prompt
The canvas isn't limited to manual placement. Halo's AI assistant understands the entire platform: content types, component registry, design tokens, media library. Tell it “Build me a hero section with a full-bleed video, the hotel name in Kepler Std, and a Book Now button” and watch it assemble the primitives in real-time. The same agent that builds websites from the canvas can build them from conversation.
Intelligence before launch
Before a single real visitor arrives, Halo's Swarm sends AI-powered travelers — each with a realistic persona, device preference, and browsing behavior — to test your site the way real guests would. Luxury seekers, business travelers, family planners, budget browsers. As many traveler archetypes as needed, each making decisions the way a real guest would. The result: behavioral intelligence you'd normally wait months of live traffic to get — available in minutes.
Beyond the website builder
The canvas and website builder are Halo's core. But several of Halo's intelligence modules work independently — deployable to any hotel website via script injection, regardless of how it was built.
Swarm intelligence
AI persona-driven UX testing. Deploys to any site. Ten traveler archetypes browse your pages on mobile, tablet, and desktop, reporting conversion bottlenecks, navigation confusion, and content gaps before real guests encounter them.
Behavioral analytics
First-party, GDPR-compliant guest profiles built from browsing behavior. Session recordings, heatmaps, and conversion funnels — broken down by traveler persona, not aggregated into noise. Works on any website with a single script tag.
AI content and SEO
Automated meta descriptions, structured data, readability scoring, keyword analysis, and GEO optimization. Plugs into any CMS or static site to make your content visible to AI search engines and travel assistants.
A note on the demo
The primitive tree in the demo is assembled step-by-step through visible UI clicks on Halo's canvas palette. Styling (fonts, colors, spacing, content) is applied in bulk via a single JavaScript call that sets all property values at once — the same values a designer would enter one-by-one through the style panel. This is done for demo pacing; the style panel supports setting each property individually.