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
  JSONComponent
  JSON representation of a component.
  component
  stringRequired
  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
  React.JSX.Element
- string
  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
  ComponentLike
  A type that can be used to represent a component-like structure.
  JSONComponent
  JSONComponent
  JSON representation of a component.
  component
  stringRequired
  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
  React.JSX.Element
  string
  string
- boolean
  boolean
social
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
  JSONComponent
  JSON representation of a component.
  component
  stringRequired
  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
  React.JSX.Element
- string
  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: "/guides/introduction"
    sections:
        - 
            title: Explore the docs
            cards:
                - 
                    title: Quickstart
                    children: Start using xyd in minutes.
                    kind: secondary
                    icon: rocket
                    href: "/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
  stringRequired
  The button label.
  href
  stringRequired
  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.ReactNodeRequired
  Content to be displayed in the card body
  href
  stringRequired
  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
  stringRequired
  href
  stringRequired
  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
  stringRequired
  href
  stringRequired
  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

Components

Banner

Footer

Home

First Slide