SpecUI

Build UIs with Specs.

^{Spec. Preview. Ship.}

SpecUI is a dev tool for writing specs to build user interfaces.

✍️ Write specs in:

• YAML, JSON and JS/TS
• Or use the SpecUI Visual Editor

⚡️ Generate code for:

• Any language: JavaScript, Go, Python, Ruby, Java
• Any framework: Next.js, Astro, Vue, Angular, Gorm, Django
• Any markup/format/other: HTML, JSON, YAML, CSS

Go to https://specui.org/playground

The fastest way to create a SpecUI project:

npx @specui/cli new

Read the docs: https://specui.org/docs

Below is a very basic example using the @specui/next-generator code generator to generate code for a Next.js app.

name: ecto-1-blog
version: 1.0.0
description: Scribbles by an Ex-Ghostbuster.
license: MIT
author:
  name: Louis Tully
  email: [email protected]
  url: https://example.org/
auth:
  providers:
    - github
    - google
    - facebook
models:
  post:
    attributes:
      id:
        key: primary
        type: number
      name:
        unique: true
        type: string
      slug:
        unique: true
        type: string

app/
  api/
    auth/
      [...nextauth]/
        route.ts
    createPost/
      route.ts
    deletePost/
      route.ts
    getPost/
      route.ts
    listPosts/
      route.ts
  auth.ts
  globals.css
  layout.tsx
  page.tsx
lib/
  errors/
    BadRequestError.ts
    ConflictError.ts
    ForbiddenError.ts
    HttpError.ts
    MethodNotAllowedError.ts
    NotFoundError.ts
    UnauthorizedError.ts
    UnprocessableContentError.ts
  schemas/
    createPostSchema.ts
    deletePostSchema.ts
    getPostSchema.ts
    listPostsSchema.ts
  tables/
    PostsTable.ts
  client.ts
  db.ts
public/
  next.svg
  vercel.svg
.eslintrc.json
.gitignore
LICENSE
next.config.js
package.json
postcss.config.js
README.md
tailwind.config.js
tsconfig.json

• Continuous Code Generation: Update existing files based on new specs or logic.
• Spec-Driven: Specs guide what SpecUI generates, making sure everything is in line with your requirements.
• Versatile: Generate everything from UI components to APIs, configurations, and even entire mobile apps.
• Framework Agnostic: Use SpecUI to build UIs for React, Vue, Angular and Vanilla JS.

SpecUI uses a spec to understand what to generate. Specs are versatile, and you can write them in TypeScript, JSON, or YAML. SpecUI then processes this spec through various components like Generators, Templates, and Processors to produce the end code.

SpecUI is released under the MIT License.