A Better Developer Experience

A TypeScript Starter Kit that will help you bootstrap your next project without minimal opinion.

bun-ts-starter

This is an opinionated TypeScript Starter kit to help kick-start development of your next Bun package.

Get Started

It's rather simple to get your package development started:

# you may use this GitHub template or the following command:
bunx degit stacksjs/ts-starter my-pkg
cd my-pkg

 # if you don't have pnpm installed, run `npm i -g pnpm`
bun i # install all deps
bun run build # builds the library for production-ready use

# after you have successfully committed, you may create a "release"
bun run release # automates git commits, versioning, and changelog generations

Check out the package.json scripts for more commands.

Developer Experience (DX)

This Starter Kit comes pre-configured with the following:

• Powerful Build Process - via Bun
• Fully Typed APIs - via TypeScript
• Documentation-ready - via VitePress
• CLI & Binary - via Bun & CAC
• Be a Good Commitizen - pre-configured Commitizen & git-cz setup to simplify semantic git commits, versioning, and changelog generations
• Built With Testing In Mind - pre-configured unit-testing powered by Bun
• Renovate - optimized & automated PR dependency updates
• ESLint - for code linting (and formatting)
• GitHub Actions - runs your CI (fixes code style issues, tags releases & creates its changelogs, runs the test suite, etc.)

Changelog

Please see our releases page for more information on what has changed recently.

Stargazers

Contributing

Please review the Contributing Guide for details.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discussions on GitHub

For casual chit-chat with others using this package:

Join the Stacks Discord Server

Postcardware

Two things are true: Stacks OSS will always stay open-source, and we do love to receive postcards from wherever Stacks is used! 🌍 We also publish them on our website. And thank you, Spatie

Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094

Sponsors

We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.

• JetBrains
• The Solana Foundation

Credits

• Chris Breuer
• All Contributors

License

The MIT License (MIT). Please see LICENSE for more information.

Made with 💙

Introduction to STX

STX is a modern UI engine that combines the elegance of Laravel Blade with the power of Bun. It's designed to make building user interfaces both enjoyable and efficient, with first-class TypeScript support and powerful features out of the box.

What is STX?

STX is a UI engine that allows you to:

• Write templates with a clean, familiar syntax
• Use TypeScript directly in your templates
• Create reusable components with props and slots
• Leverage streaming rendering for better performance
• Build type-safe applications with full IDE support

Key Features

🚀 Performance First

Built on Bun, STX delivers exceptional performance:

• Lightning-fast template compilation
• Minimal runtime overhead
• Efficient component rendering
• Smart caching and build optimization

💪 Type Safety

First-class TypeScript support:

• Full type checking in templates
• Type-safe props and events
• IDE autocompletion
• Error detection at build time

🧩 Component System

Build reusable UI components:

• Props validation
• Slots and named slots
• Component lifecycle hooks
• Scoped styles

🔄 Directives

Powerful template directives:

@if(user.isAdmin)
  <admin-panel />
@else
  <user-panel />
@endif

@foreach(items as item)
  <list-item :data="item" />
@endforeach

🎨 Styling

Multiple ways to style your components:

<style>
  .button {
    @apply bg-blue-500 text-white px-4 py-2 rounded;
  }
</style>

🛠 Developer Tools

Comprehensive tooling support:

• VSCode extension with syntax highlighting and IntelliSense
• DevTools for debugging and performance monitoring
• CLI for project scaffolding and build management

Quick Example

Here's a simple STX component:

@ts
interface ButtonProps {
  type?: 'primary' | 'secondary'
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
}
@endts

@component('Button', {
  props: {
    type: 'primary',
    size: 'md',
    disabled: false
  }
})
  <button 
    class="btn btn-{{ type }} btn-{{ size }}"
    :disabled="disabled"
  >
    <slot></slot>
  </button>

  <style>
    .btn {
      @apply rounded font-medium;
    }
    .btn-primary {
      @apply bg-blue-500 text-white;
    }
    .btn-secondary {
      @apply bg-gray-500 text-white;
    }
  </style>
@endcomponent

Why STX?

• Modern: Built with modern web development practices in mind
• Type-Safe: First-class TypeScript support for better developer experience
• Fast: Powered by Bun for exceptional performance
• Familiar: Blade-inspired syntax that's easy to learn
• Tooling: Great IDE support and developer tools
• Flexible: Works with any backend technology

Getting Started

Ready to start building with STX? Follow these steps:

1. Installation Guide - Set up STX in your project
2. Quick Start - Learn the basics in 5 minutes
3. Examples - Explore example components and patterns
4. API Reference - Complete API documentation

Need Help?

• Join our Discord Community
• Check out the GitHub Repository
• Follow us on Twitter
• Read our Best Practices Guide