AiZeph StudioX
Production-grade static publishing and site builder platform.

Marketplace

15 layout presets

Switch page structure through JSON instead of hand-editing route markup.

Available layouts

editorial

Blog Layout

layout: "blog"

Blog Layout for editorial experiences with sidebar emphasis.

Use cases

editorial · blog pages · config-driven sites

Screenshot hints

blog · sidebar rail · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "blog"
}

Example usage

Blog Layout example

Suggested page: /layouts

{
  "layout": "blog"
}

minimal

Centered Layout

layout: "centered"

Centered Layout for minimal experiences with single-column emphasis.

Use cases

minimal · centered pages · config-driven sites

Screenshot hints

centered · centered content · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "centered"
}

Example usage

Centered Layout example

Suggested page: /layouts

{
  "layout": "centered"
}

app

Dashboard Layout

layout: "dashboard"

Dashboard Layout for app experiences with sidebar emphasis.

Use cases

app · dashboard pages · config-driven sites

Screenshot hints

dashboard · sidebar rail · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "dashboard"
}

Example usage

Dashboard Layout example

Suggested page: /layouts

{
  "layout": "dashboard"
}

editorial

Default Layout

layout: "default"

Default Layout for editorial experiences with single-column emphasis.

Use cases

editorial · default pages · config-driven sites

Screenshot hints

editorial · centered content · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "default"
}

Example usage

Default Layout example

Suggested page: /layouts

{
  "layout": "default"
}

docs

Documentation Layout

layout: "documentation"

Documentation Layout for docs experiences with sidebar emphasis.

Use cases

docs · documentation pages · config-driven sites

Screenshot hints

documentation · sidebar rail · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "documentation"
}

Example usage

Documentation Layout example

Suggested page: /layouts

{
  "layout": "documentation"
}

media

Gallery Layout

layout: "gallery"

Gallery Layout for media experiences with single-column emphasis.

Use cases

media · gallery pages · config-driven sites

Screenshot hints

gallery · centered content · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "gallery"
}

Example usage

Gallery Layout example

Suggested page: /layouts

{
  "layout": "gallery"
}

catalog

Grid Heavy Layout

layout: "grid-heavy"

Grid Heavy Layout for catalog experiences with single-column emphasis.

Use cases

catalog · grid-heavy pages · config-driven sites

Screenshot hints

grid-heavy · centered content · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "grid-heavy"
}

Example usage

Grid Heavy Layout example

Suggested page: /layouts

{
  "layout": "grid-heavy"
}

conversion

Hero Focus Layout

layout: "hero-focus"

Hero Focus Layout for conversion experiences with single-column emphasis.

Use cases

conversion · hero-focus pages · config-driven sites

Screenshot hints

hero-focus · centered content · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "hero-focus"
}

Example usage

Hero Focus Layout example

Suggested page: /layouts

{
  "layout": "hero-focus"
}

conversion

Landing Layout

layout: "landing"

Landing Layout for conversion experiences with single-column emphasis.

Use cases

conversion · landing pages · config-driven sites

Screenshot hints

landing · centered content · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "landing"
}

Example usage

Landing Layout example

Suggested page: /layouts

{
  "layout": "landing"
}

content

Magazine Layout

layout: "magazine"

Magazine Layout for content experiences with sidebar emphasis.

Use cases

content · magazine pages · config-driven sites

Screenshot hints

magazine · sidebar rail · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "magazine"
}

Example usage

Magazine Layout example

Suggested page: /layouts

{
  "layout": "magazine"
}

minimal

Minimal Layout

layout: "minimal"

Minimal Layout for minimal experiences with single-column emphasis.

Use cases

minimal · minimal pages · config-driven sites

Screenshot hints

minimal · centered content · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "minimal"
}

Example usage

Minimal Layout example

Suggested page: /layouts

{
  "layout": "minimal"
}

commerce

Product Layout

layout: "product"

Product Layout for commerce experiences with sidebar emphasis.

Use cases

commerce · product pages · config-driven sites

Screenshot hints

product · sidebar rail · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "product"
}

Example usage

Product Layout example

Suggested page: /layouts

{
  "layout": "product"
}

content

Sidebar Left Layout

layout: "sidebar-left"

Sidebar Left Layout for content experiences with sidebar emphasis.

Use cases

content · sidebar-left pages · config-driven sites

Screenshot hints

sidebar-left · sidebar rail · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "sidebar-left"
}

Example usage

Sidebar Left Layout example

Suggested page: /layouts

{
  "layout": "sidebar-left"
}

content

Sidebar Right Layout

layout: "sidebar-right"

Sidebar Right Layout for content experiences with sidebar emphasis.

Use cases

content · sidebar-right pages · config-driven sites

Screenshot hints

sidebar-right · sidebar rail · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "sidebar-right"
}

Example usage

Sidebar Right Layout example

Suggested page: /layouts

{
  "layout": "sidebar-right"
}

showcase

Split Screen Layout

layout: "split-screen"

Split Screen Layout for showcase experiences with single-column emphasis.

Use cases

showcase · split-screen pages · config-driven sites

Screenshot hints

split-screen · centered content · layout framing

Props

Required: none

Optional: containerWidth, sectionSpacing, slot positioning

JSON snippet

{
  "layout": "split-screen"
}

Example usage

Split Screen Layout example

Suggested page: /layouts

{
  "layout": "split-screen"
}