Components

Customization

Components

Learn how to use built-in components

docs.json

{
    "components": {
        "banner": {
            "content": "**xyd 0.1.0** - Docs platform for future dev",
            "label": "Coming Soon",
            "icon": "sparkles",
            "href": "https://github.com/orgs/livesession/projects/4/views/1"
        }
    }
}

content

ComponentLike

Required

A type that can be used to represent a component-like structure.

JSONComponent

JSON representation of a component.

component

string

Required

The component type, e.g. "Button", "Card", etc.

props

Record<string, any>

The component's children, which can be a string, an array of strings, or an array of JSONComponent objects.

React.JSX.Element

string

label

string

Banner label.

kind

"secondary"

Banner kind.

href

string

Banner href.

icon

string

Banner icon.

docs.json

{
    "components": {
        "footer": {
                "social": {
                    "github": "https://github.com/livesession/xyd",
                    "slack": "https://join.slack.com/t/xyd-docs/shared_invite/zt-3brqammx1-qVPwQ8~gYFgocioExxHA2A"
                },
                "links": [
                    {
                        "header": "Resources",
                        "items": [
                            {
                                "label": "Examples",
                                "href": "https://github.com/xyd-js/examples"
                            },
                            {
                                "label": "API Docs Demo",
                                "href": "https://apidocs-demo.xyd.dev"
                            },
                            {
                                "label": "Live Preview",
                                "href": "https://preview.xyd.dev"
                            },
                            {
                                "label": "CodeSandbox",
                                "href": "https://codesandbox.io/p/github/xyd-js/deploy-samples-codesandbox"
                            },
                            {
                                "label": "Storybook",
                                "href": "http://sb.xyd.dev"
                            }
                        ]
                    },
                    {
                        "header": "Company",
                        "items": [
                            {
                                "label": "Careers",
                                "href": "https://livesession.io/careers"
                            },
                            {
                                "label": "Blog",
                                "href": "https://xyd.dev/blog"
                            },
                            {
                                "label": "Feature Requests",
                                "href": "https://github.com/livesession/xyd/discussions/categories/feature-requests"
                            }
                        ]
                    },
                    {
                        "header": "Legal",
                        "items": [
                            {
                                "label": "Privacy Policy",
                                "href": "https://livesession.io/privacy-policy"
                            },
                            {
                                "label": "Terms of Service",
                                "href": "https://livesession.io/terms-of-service"
                            }
                        ]
                    }
                ],
                "footnote": {
                    "component": "a",
                    "props": {
                        "href": "https://livesession.io",
                        "target": "_blank",
                        "children": "Powered by LiveSession"
                    }
                }
            }
        }
    }
}

kind

"minimal"

logo

ComponentLike

A type that can be used to represent a component-like structure.

JSONComponent

JSON representation of a component.

component

string

Required

The component type, e.g. "Button", "Card", etc.

props

Record<string, any>

The component's children, which can be a string, an array of strings, or an array of JSONComponent objects.

React.JSX.Element

string

boolean

social

{
    [K in Social]?: string;
}

Footer socials

x

string

facebook

string

youtube

string

discord

string

slack

string

github

string

linkedin

string

instagram

string

hackernews

string

medium

string

telegram

string

bluesky

string

reddit

string

links

WebEditorFooterLinks

Footer links

footnote

ComponentLike

A type that can be used to represent a component-like structure.

JSONComponent

JSON representation of a component.

component

string

Required

The component type, e.g. "Button", "Card", etc.

props

Record<string, any>

The component's children, which can be a string, an array of strings, or an array of JSONComponent objects.

React.JSX.Element

string

Home

---
title: You Page Title
component: home
componentProps:
    hero:
        title: Welcome to xyd by LiveSession
        description: The docs framework for future dev.
        image: "/public/assets/logo.svg"
        button: 
            title: "Get Started"
            href: "/docs/guides/introduction"
    sections:
        - 
            title: Explore the docs
            cards:
                - 
                    title: Quickstart
                    children: Start using xyd in minutes.
                    kind: secondary
                    icon: rocket
                    href: "/docs/guides/quickstart"
        - 
            title:  Resources
            cards:
                - 
                    title: Examples
                    children: Browse real-world examples and templates to kickstart your docs.
                    kind: secondary
                    icon: zap
                    href: https://github.com/xyd-js/examples
---

hero

PageHomeHero

Hero section content for the home page.

title

string

The main title text.

description

string

The description text.

image

string

The image URL for the hero section.

button

PageHomeHeroButton

The main button for the hero section.

title

string

Required

The button label.

href

string

Required

The URL the button links to.

sections

array of PageHomeSection

Section displayed on the home page.

title

string

The section title.

cards

array of PageHomeCard

Card displayed in a section on the home page. Extends GuideCardProps.

children

React.ReactNode

Required

Content to be displayed in the card body

href

string

Required

URL the card links to

title

string

Title displayed at the top of the card

icon

React.ReactNode

Optional icon displayed to the left of the content

kind

"secondary"

Visual style variant of the card

size

"sm" | "md"

Size variant of the card

className

string

Additional CSS class names to apply to the card

as

React.ElementType<any, keyof IntrinsicElements>

Additional props to pass to the link element

First Slide

---
title: You Page Title
component: firstslide
componentProps:
    content:
        title: xyd - docs framework for content artisans
        description: A modern, extensible documentation platform for APIs, content, and developer experience.
        primaryButton: 
            title: Get xyd
            href: https://xyd.dev
        secondaryButton:
            title: View Documentation
            href: https://xyd.dev

    rightContent: |
        ```yaml index.md
        bun add -g xyd-js
        ```
---

content

PageFirstSlideContent

The main content for the slide.

title

string

The main title text.

description

string

The description text.

primaryButton

PageFirstSlideButton

The primary action button.

title

string

Required

href

string

Required

The URL the button links to.

kind

"primary" | "secondary"

The visual style of the button.

disabled

boolean

Whether the button is disabled.

secondaryButton

PageFirstSlideButton

The secondary action button.

title

string

Required

href

string

Required

The URL the button links to.

kind

"primary" | "secondary"

The visual style of the button.

disabled

boolean

Whether the button is disabled.

rightContent

React.ReactNode

Optional React node to display on the right side.

Edit page

Appearance Icons