The visual page builder for developer-built components

Build components in React, Vue, or Svelte. Push with one command.
Let your team create pages visually.

Documentation · Watch Demo · Website

_{If you find Oaysus useful, please consider giving us a ⭐ on GitHub!}

_{From code to published page in seconds}

Watch how fast you can go from code to a published website with Oaysus.

oaysus init         # Pick your framework. Name your project.
oaysus push         # Your component builds and deploys in seconds.

No build pipelines. No complex deployments. Your marketing team creates pages visually, and you get back to building features.

npm install -g @oaysus/cli

Requires Node.js 20 or higher.

# 1. Authenticate with your Oaysus account
oaysus login

# 2. Create a new theme pack project
oaysus init my-components

# 3. Navigate to the project
cd my-components

# 4. Push your components to Oaysus
oaysus push

That's it. Your components are now available in the visual page builder.

✓ Validated 1 component
✓ Built and bundled (2.1 KB)
✓ Uploaded to Oaysus
✓ Published!

Install in dashboard: Content → Theme Packs

Build with the tools you already know:

• React — JSX/TSX components with full hooks support
• Vue — Single File Components (.vue)
• Svelte — Native Svelte components (.svelte)

Framework is automatically detected from your package.json dependencies.

Each component has two files: the code and a schema that defines what's editable.

Component (React example):

export default function Hero({ headline, subtext, ctaLabel }) {
  return (
    <section className="py-20 text-center">
      <h1 className="text-5xl font-bold">{headline}</h1>
      <p className="mt-4 text-xl text-gray-600">{subtext}</p>
      <button className="mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg">
        {ctaLabel}
      </button>
    </section>
  );
}

Schema:

{
  "displayName": "Hero Section",
  "props": {
    "headline": {
      "type": "string",
      "default": "Build faster, ship sooner"
    },
    "subtext": {
      "type": "string",
      "default": "The platform for modern teams"
    },
    "ctaLabel": {
      "type": "string",
      "default": "Get Started"
    }
  }
}

Marketing edits these props in the visual editor. You never touch the code again.

my-components/
├── package.json
└── components/
    ├── Hero/
    │   ├── index.tsx
    │   └── schema.json
    ├── FeatureGrid/
    │   ├── index.tsx
    │   └── schema.json
    └── Testimonials/
        ├── index.tsx
        └── schema.json

• Quick Start Guide — Build your first component in 5 minutes
• CLI Reference — Complete command documentation
• Component Guide — Props, schemas, and best practices
• Theme Packs — Organize and distribute component collections

1. Create an account — Free tier available
2. Install the CLI — npm install -g @oaysus/cli
3. Follow the quick start — oaysus.com/docs/quickstart

We welcome contributions! See CONTRIBUTING.md for development setup.

MIT © Oaysus