Rapid App Development

Pre-release until public beta released. Coming May/June.

The goal of the framework is to help you create & maintain frontends, backends, and clouds—without having to worry about the boilerplate. Stacks is a rapid application development framework, meeting all your full stack needs.

• Web & Desktop applications
• Serverless & traditional APIs
• Cloud infrastructure creation & maintenance
• Interactive CLIs
• Framework-agnostic component & function libraries
• Deployment & Release Manager (CI & CD)

Stacks helps you every step along the way—in beginner & expert-friendly ways, allowing you to focus on the what and why of your project.

“Convention over configuration” is the Stacks mantra. - Chris

Features

The Stacks framework is a harmony of several “engines” to build any web and/or desktop application, in highly scalable & privacy-friendly ways. It consists of the following engines:

Stacks UI

Develop dynamic UIs with helpers for atomic design, and much more.

• 🧩 Components a primitive to develop user interfaces
• 🤖 Functions a primitive to develop business logic (and grant your UI superpowers)
• 🌐 Web "a routing & templating engine that makes sense" using components—SSG & PWA ready
• 🖥️ Desktop components as desktop elements
• 📚 Library auto-builds component & function libraries
• ⚡️ Powered by Nitro, Tauri, UnoCSS, Vite & Vue

Stacks Functions

Develop serverless (or server) functions with countless helpers to build scalable & fast APIs.

• 🪄 AI deep OpenAI integration
• 🤖 APIs scalability & maintainability built-in
• 🏎️ Cache Redis, DynamoDB, Upstash, SingleStore, and more—serverless
• ⚙️ CLIs create beautiful CLIs for Linux, Windows, and Mac—without requirements
• 📀 Database MySQL, Postgres, PlanetScale, Supabase, Prisma, ...
• 👾 Errors native type-safe error handling
• 🗓️ Events functional event (front & backend) communication
• 📢 Notifications emails, SMSs, direct, and push notifications & webhooks
• 🗺️ ORM supercharged, fully-typed models & relations (including automated migrations)
• 💳 Payments unified API for one-off & subscription billing methods for Stripe
• ⚙️ Queues run any heavy workload in the background
• 🛠️ Query Builder powerful, type-safe SQL query builder
• 💬 Realtime “everything you need to build dynamic real-time apps”
• 🧭 Router smart routing, file-based or Laravel-like
• 🔎 Search Engine smart searching, advanced filtering & sorting, pagination, headless UI
• 💾 Storage easily create & make use of local & remote storages/file systems
• 🧪 Tinker a powerful TypeScript REPL
• 🌪️ Validation e2e type-safety (true frontend & backend harmony)
• 🎯 X-Ray all you need to debug, log & analyze

Stacks Cloud

Create your personal or professional Vercel-like cloud, based on MIT-licensed OSS.

• ☁️ Server local development server & production-ready servers
• ⛅️ Serverless on-demand, auto-scaling, zero maintenance
• 🚏 CDN zero-config low-latency CDN, including request life-cycle hooks & optimized request compressions (Brotli & gzip)
• 🔀 Domain version-controlled & zero-config domain management (e.g. DNS)
• 📧 Email secure & simplistic easy-peasy@custom-domains.com mail
• 🔐 Firewall native web application firewall support
• 🚜 Maintenance handles your cloud infrastructure via the Stacks & Serverless framework
• 🤖 Infrastructure as Code create & maintain your cloud infrastructure with ease

Stacks CI/CD

Focus on coding, not publishing.

• 🚀 Deployment Manager take the sweat out of production deployments (AWS, Vercel, Netlify, and more)
• 📫 Release Manager libraries (component & function) auto-published to npm, git helpers, and more

Stacks DX

Enhanced productivity for developers. No more creating boilerplate.

• 💡 IDE Integration auto-completions, inline docs & a powerful VS Code setup
• 🪄 Zero-Config yet highly configurable—convention over configuration
• 👩🏽‍🔧 Linter & Formatter auto-configured & built into your IDE
• 💪🏼 Type Strong built-in e2e type-safety
• ✨ Git Workflows committing with ease
• 🚗 Auto Imports your components & functions, including date, string, array, & object helpers
• ⏩ Code Snippets say goodbye to the boilerplate—thank you Sarah Drasner
• 🔤 Spell Checker be notified once there are typos
• 🛠️ Utilities Collections, VueUse, and more
• 🧪 Testing unit & e2e tests powered by Vitest & Playwright

No matter whether you are a beginner or an expert, the approachable Stacks design allows you to learn at your own pace, using our thorough documentation covering every aspect of the framework. Stacks is extremely beginner & expert-friendly.

Develop beautiful, reactive, composable UIs without learning a new set of languages. HTML, CSS, and minimal JavaScript—that's all you need to dive in now! Or TypeScript ✌🏼

A true rapid application development framework for all Full Stack needs. Next-level simplicity & helpful DX.

Get Started

It's incredibly easy to get started with this framework. Simply run the following command in your terminal:

sh <(curl stacksjs.dev) my-project

# alternatively, if Node.js >= v18.16 is installed already,
# you may also get started via:
npx stacks new my-project

🤖 Usage

The following list includes some of the most common ways to interact with the Stacks API. Meet the toolkit, Buddy:

buddy install # installs all dependencies
buddy dev # starts one of the dev servers (components, functions, pages, or docs)
buddy build # follow CLI prompts to select which library (or server) to build
buddy commit # follow CLI prompts for committing changes
buddy release # creates the releases for the stack & consequently, publishes them to npm
buddy upgrade # auto-update all deps & the Stacks framework

buddy make:component HelloWorld # scaffolds a component
buddy make:function HelloWorld # scaffolds a function
buddy make:page hello-world # scaffolds a page (https://my-project.test/hello-world)

buddy --help

buddy --version # get the Stacks version
buddy --help # view help menu
# please note: you may suffix any command with the
# `command --help` flag to review the help menu

buddy install # installs dependencies
buddy add # adds a stack or dependency
buddy fresh # fresh reinstall of all deps
buddy clean # removes all deps

buddy upgrade # auto-upgrades deps, framework, node.js, and/or pnpm
buddy upgrade:dependencies # auto-upgrades deps & the Stacks framework
buddy upgrade:framework # auto-upgrades deps & the Stacks framework
buddy upgrade:package-manager # auto-upgrades deps & the Stacks framework
buddy upgrade:search-engine # auto-upgrades configured search engine
buddy upgrade:node # upgrades to latest project-defined node version
buddy upgrade:all # upgrades Node, package manager, framework, dependencies

# if you need any more info on any command listed here, you may suffix
# any of them via the "help option", i.e. `buddy ... --help`

buddy dev # starts one of the dev servers (components, functions, pages, or docs)
buddy dev:components # starts local playground dev server
buddy dev:desktop # starts the Desktop playground
buddy dev:pages # starts local playground pages dev server
buddy dev:functions # stubs local the functions
buddy dev:docs # starts local docs dev server
buddy development # `buddy dev` alias

# for Laravel folks, `serve` may ring more familiar than the `dev` name. Hence, we aliased it:
buddy serve
buddy serve:components
buddy serve:desktop
buddy serve:pages
buddy serve:functions
buddy serve:docs

# building for production (e.g. AWS, Google Cloud, npm, Vercel, Netlify, et al.)
buddy build # select a specific build (follow CLI prompts)
buddy build:pages # builds SSG pages
buddy build:desktop # builds Desktop application
buddy build:library # builds any or all libraries
buddy build:functions # builds function library
buddy build:components # builds Vue component library & Web Component library
buddy build:web-components # builds framework agnostic Web Component library (i.e. Custom Elements)
buddy build:vue-components # builds Vue 2 & 3-ready Component library
buddy build:all # builds all your code

# `buddy build` aliases
buddy prod
buddy prod:components
buddy prod:desktop
buddy prod:library
buddy prod:pages
buddy prod:functions
buddy prod:vue-components
buddy prod:web-components
buddy prod:all
buddy production # `buddy prod` alias

# sets your application key
buddy key:generate

buddy make:component HelloWorld # bootstraps a HelloWorld component
buddy make:function hello-world # bootstraps a hello-world function
buddy make:page hello-world # bootstraps a hello-word page
buddy make:model Car # bootstraps a Car model
buddy make:database cars # creates a cars database
buddy make:migration create_cars_table # creates a cars migration file
buddy make:factory cars # creates a Car factory file
buddy make:seed cars # creates a Car seed file
buddy make:table cars # boostraps a cars data table
buddy make:notification welcome-email # bootstraps a welcome-email notification
buddy make:lang de # bootstraps a lang/de.yml language file
buddy make:stack my-project # shares logic with `npx stacks new my-project`

buddy lint # runs linter
buddy lint:fix # runs linter and fixes issues

buddy commit # follow CLI prompts for committing staged changes
buddy release # creates the releases for the stack & triggers the Release Action (workflow)
buddy changelog # generates CHANGELOG.md

# when deploying your app/s to a remote server or cloud provider
buddy deploy # select a specific deployment (follow CLI prompts)
buddy deploy:docs # deploys docs to AWS (or other configured provider)
buddy deploy:functions # deploys functions to AWS (or other configured provider)
buddy deploy:pages # deploys pages to AWS (or other configured provider)
buddy deploy:all # deploys all your code

# select the example to run (follow CLI prompts)
buddy example # prompts you to select which example to run
buddy example:vue # runs the Vue example
buddy example:web-components # runs the Web Component example

# you likely won't need to run these commands as they are auto-triggered, but they are available
buddy generate  # prompts you to select which generator to run
buddy generate:entries # generates entry files for components, functions, & pages
buddy generate:vue-compat # generates Vue 2 compatibility layer
buddy generate:web-types # generates Web Component types
buddy generate:vscode-custom-data # generates VSCode custom data
buddy generate:ide-helpers # generates IDE helpers
buddy generate:component-meta # generates component meta
buddy generate:all # runs all generators

# generates your application key
buddy key:generate # generates your application key

# generate your TypeScript declarations
buddy types:generate # generates types for your components, functions, & pages
buddy types:fix # auto-fixes types for your components, functions, & pages

# test your stack
buddy test # runs test suite (unit & e2e)
buddy test:coverage # runs test coverage
buddy test:types # runs typecheck

# the CLI may be triggered in any
# of the following syntax:
stx fresh
buddy fresh
bud fresh
buddy fresh

Read more here about the Stacks CLI in the documentation.

📚 Utilizing the Built Libraries

Because Stacks optimizes the development of easily reusable & composable component & function libraries, the primary intention is to always keep it simple, yet configurable.

By default, Stacks realizes whether your Stack includes components, functions, and/or pages. Based on that determination, Stacks builds your outputs.

The UI libraries that automatically get built are: a Web Component (Custom Elements) & Vue Component library.

npm install my-awesome-library

<html>
  <body>
    <hello-world name="Jane Doe"></hello-world>
    <script src="my-awesome-library.js"></script>
  </body>
</html>

npm install my-awesome-library

<script setup lang="ts">
import HelloWorld from 'my-awesome-library'
</script>

<template>
  <HelloWorld name="J Doe" />
</template>

A function library may also be automatically generated.

npm install hello-world-library

import { count, increment } from 'hello-world-fx'

console.log('count is', count)
increment()
console.log('increased count is', count)

You may view this framework as an incredibly “useful set of frames” to assist in efficiently bootstrapping, designing, and managing component & function libraries—using industry best practices, to reach one of the broadest user bases possible.

🎯 Roadmap

Part of the Stacks ecosystem are the following first-party supported stacks:

• Table (Data tables with ease)
• Calendar (Add to Calendar utilities—iCal, Google, and more)
• Command Palette (⌘ + k for the web)
• Date Picker (Beautiful, modern date picker)
• File Manager (Build your own file manager—like Dropbox or Google Drive)
• Image (Modern image experience)
• Video (Modern video experience)
• Audio (Modern audio experience)
• Web3 (Solana support, cross-chain core. Ethereum & Cardano drivers coming.)
  • Wallets (Wallet Authentication)
  • NFT (NFTs, Candy Machine mechanisms, and more.)
  • DeFi (Cross-chain DeFi engine, including staking support)
  • DAO (Powerful toolkit for DAO governance, including a Reddit-type of voting system)

View our detailed roadmap/s here, for more information. Additionally, you may find interesting stacks, information & examples over at Awesome Stacks.

🧪 Testing

pnpm test

📈 Changelog

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

🚜 Contributing

Please see 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

📄 Sponsors

Once we launch a usable Stacks version, we hope people will start enjoying it! Coming soon.

🙏🏼 Credits

Many thanks to the following core technologies & people who have contributed to this package:

• Chris Breuer
• Dan Scanlon many thanks for donating the stacks name on npm
• All Contributors

📄 License

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

Made with ❤️