Extend HabitatTypeScript · Schemas · APIs · Tests

Bring your code. Keep Habitat’s editor.

Define typed blocks, collections, routes and business tools. Clients keep one Studio; your team keeps source control and tests.

See working examples See agency pricing

site-composition

export const defaultSiteConfig = {
  id: "default",
  defaultLocale: "en",
  extensions: starterManifests
}

export const defaultSiteSdk = createStarterSdk()

Use the workflow you already trust.

Keep source control, TypeScript, schemas, API contracts and tests. Habitat connects them to authoring and business tools in Studio.

Use familiar web technology

Build with Nuxt, Vue, TypeScript and Hono rather than a proprietary template language.

Define content with types

Use typed blocks, collections and schemas for rendering, migrations and reuse.

Extend clear boundaries

Add blocks, routes, business tools and integrations while Studio remains consistent.

Publish with Journi

Run and test locally, then publish through Journi hosting. Ask us about data-residency requirements.

See how each extension works from code to Studio.

Follow real examples for a page block, reusable collection, validated API route and business workspace. Each snippet is shortened from the current repository.

Blocks

Editor controls · validation · rendering

A block owns its content schema, editing fields, defaults and published HTML. This shortened example follows the built-in Hero definition.

hero-block

const hero = createBlock({
  type: "hero", name: "Hero", category: "marketing",
  schema: z.object({
    eyebrow: z.string().max(80).default("Local business"),
    heading: z.string().max(120),
    body: z.string().max(1_000),
    ctaLabel: z.string().max(60), ctaUrl: linkValueSchema
  }),
  editor: { fields: [
    { key: "heading", label: "Heading", type: "text" },
    { key: "body", label: "Introduction", type: "textarea" }
  ] },
  render: (data) => `<section class="block block-hero">…</section>`
})

Collections

Fields · relationships · detail routes

Collections keep repeatable records typed and publishable. This is abbreviated from the Blog definition installed by the default site.

blog-collection

const blog = {
  id: state.settings.blog.collectionId,
  name: "Blog", slug: "blog",
  version: 1,
  fields: [
    { id: "title", name: "Title", type: "text", required: true },
    { id: "summary", name: "Summary", type: "text", required: false },
    { id: "body", name: "Article", type: "richText", required: true }
  ],
  rendering: { enabled: true, titleField: "title", templatePageId: null },
  seo: { structuredDataType: "BlogPosting", descriptionField: "summary" }
}

Routes and APIs

Hono · Zod · OpenAPI

The booking route is registered from the shared operation inventory, validates the request and writes through Habitat's state boundary.

booking-route

app.post(apiPath("booking.create"), async (c) => {
  const key = requireIdempotencyKey(c)
  const input = createBookingInputSchema.parse(await c.req.json())
  let booking: Booking | null = null
  await mutatePublicState(dependencies.repository, siteId, (state) => {
    const result = createBooking(state, input, key)
    booking = result.booking
    return result.state
  })
  return c.json(booking!, 201)
})

Business tools

Permissions · operations · audit history

This is the current Bookings module contribution. The manifest declares the capability and the module maps it to real operations and Studio state.

bookings-module

defineHabitatExtension({
  manifest: {
    id: "habitat.module.bookings",
    name: "Bookings", version: "0.1.0",
    kind: "module", capabilities: ["bookings"],
    permissions: ["forms:manage"], trusted: true
  },
  modules: [{
    id: "bookings", name: "Bookings",
    capability: "bookings",
    apiOperations: ["booking.service.upsert", "booking.create", "booking.status"],
    studioSections: ["Operations"],
    stateKeys: ["bookingServices", "bookings"]
  }]
})

One contract from editor to API to site.

A capability defines what the editor can change, how the public site renders it, which operations it creates and which permissions protect it.

Studiofocused authoring controls and operational workspaces
Contractsshared types, validation and API boundaries
Published siteresponsive output, metadata and customer actions

EditorBlock controlsContent fields
Design options
Visibility rules

↔

Shared contractservice.schemaTypes
Validation
Permissions

↔

CustomerService pageResponsive view
Booking action
Search data

Version it. Test it. Release it.

Habitat fits source control, testing, review and managed release into one repeatable route.

Compose locally

Run the site, Studio and supporting services together with normal source control and local feedback.

Validate the contracts

Type checks, schemas and generated API contracts catch drift between content, Studio and the published site.

Review the real experience

Preview responsive pages and the editing controls that clients will use before a release is accepted.

Publish with Journi

Ship the versioned site package through Journi hosting while keeping project-specific integrations explicit.

One contract your team, tools and tests can share.

Types, schemas and API definitions keep the editor, integrations and published site working from the same model.

TypeScript and JSON Schema

Share the same content shape between block code, collection data, editors and validation.

OpenAPI

Use a generated API contract for integrations, client tooling and regression checks.

Agent-readable documentation

Versioned Markdown and llms.txt explain the supported model without asking an agent to infer it from the UI.

Stable diagnostics

Machine-readable validation output makes automation useful in local development and delivery pipelines.

Journi manages the platform. You control the project.

Build against clear boundaries without taking on Habitat hosting and release maintenance.

Journi manages

The hosted Habitat platform
Platform releases, security and backups
The shared Studio and publishing path

Your team controls

Blocks, collections and business modules
Project integrations and paid third parties
Project-specific infrastructure and data-residency decisions

Bring a specialist project to Habitat.

Join agency early access or browse the blocks and capability types already available.

Talk about an agency project Browse the marketplace