For internal usage only until the beta is released by the end of October.
The goal of the Stacks framework is to help you create & maintain frontends & backends without having to worry about the boilerplate. Whether it's SSG pages, npm distributed & framework-agnostic component & function libraries, or infinitely scalable APIs, Stacks helps you every step along the way, including production deployments and the maintenance of its related infrastructure (server or serverless).
Convention over configuration is our mantra—in beginner & expert-friendly ways.
- ☁️ Cloud "on-demand, auto-scaling, zero maintenance"—create your own cloud
- ⚡️ CDN auto-setup & maintenance of low-latency CDN on top of your storage origins & APIs
- 🚀 Deployment Manager take the sweat & stress out of production deployments
- 📫 Release Manager libraries (component & function) auto-published to npm, git helpers, and more
- 🤖 CI/CD native CI, release, auto changelog generations & other workflows
- 👩🏽🔧 Linter & Formatter auto-configured & built into your IDE
- 💡 IDE Integration Auto-completions, inline docs & a powerful VS Code setup
- 💪🏼 Type Strong Built-in end-to-end type safety
- 📚 Smart Bundling Vite powered & extendable
- 🍀 Auto Imports Components, Functions. Date, String & Array helpers, Collections, VueUse, etc.
- 📈 Modern DX latest & greatest tooling accessible natively, including ESNext support
- 🪄 Zero-Config yet highly configurable
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.
- 🎨 Atomic CSS style with ease, powered by UnoCSS
- 🧩 Components automatically generate optimized Vue & Web Component libraries
- ⚡️ Pages (SSG) Static site generation & layouts developed—without breaking a sweat
- 0️⃣ Zero-config PWA sensible built-in default configs for common use cases
- 🤖 Deployments natively deploy to AWS, Netlify, Vercel, or elsewhere
- 🍀 Vue-powered extendable & native access to the ecosystem
- 🧪 Testing unit & e2e tests powered by Vitest
- 🏎️ APIs scalability & maintainability built-in
- 💨 Cache Redis or DynamoDB
- ⚙️ CLIs create beautiful CLIs for Linux, Windows, and Mac. Without any requirements.
- 📀 Database Prisma, PlanetScale, Supabase, ...
- 👾 Errors native type-safe error handling
- 🧩 Functions develop more easily & rapidly
- 📢 Notifications simply send emails, SMSs, and webhooks
- ⚙️ Queues run your heavy workload in the background
- 🏎️ Realtime "everything you need to build dynamic real-time apps"
- 🧭 Router smart routing, file-based or Laravel-like
- 💾 Storage easily create & make use of local & remote storages/file systems
- 🤖 Deployments server & serverless deployment platform for your APIs (AWS support and more)
- 🧪 Testing covered by Vitest
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 & deep DX.
It's incredibly easy to get started with this framework. Simply run the following command in your terminal:
curl -fsSL https://stacksjs.dev/setup | sh
# alternatively, if you know pnpm is already installed, get started via:
npx stacks create my-projectNote pnpm 7.14 or higher required. Run the setup script & Stacks will set you up.
Meet the Stacks Toolkit. The following list is of some of the most common ways to interact with the Stacks API:
stacks install # installs all dependencies
stacks dev # starts one of the dev servers (components, functions, pages, or docs)
stacks build # follow CLI prompts to select which library (or server) to build
stacks commit # follow CLI prompts for committing changes
stacks release # creates the releases for the stack & consequently, publishes them to npm
stacks make:component HelloWorld # scaffolds a component
stacks make:function HelloWorld # scaffolds a function
stacks make:page hello-world # scaffolds a page (https://127.0.0.1/hello-world)
stacks --helpView the complete Stacks Toolkit
stacks --version # get the Stacks version
stacks --help # view help menu
# please note: you may suffix any command with the
# `command --help` flag to review the help menu
stacks install # installs your dependencies
stacks fresh # fresh reinstall of all deps
stacks clean # removes all your deps
stacks update # auto-update deps & the Stacks framework
stacks update:dependencies # auto-update deps & the Stacks framework
stacks update:framework # auto-update deps & the Stacks framework
stacks update:package-manager # auto-update deps & the Stacks framework
stacks update:node # update to latest project-defined node version
stacks update:all # update 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. `stacks ... --help`
stacks dev # start one of the dev servers (components, functions, pages, or docs)
stacks dev:components # start local playground dev server
stacks dev:desktop # start local Desktop dev server
stacks dev:pages # start local playground pages dev server
stacks dev:functions # stub local the functions
stacks dev:docs # start local docs dev server
stacks development # `stacks dev` alias
# for Laravel users, `serve` may be a more familiar command. Hence, we aliased it:
stacks serve
stacks serve:components
stacks serve:pages
stacks serve:functions
stacks serve:docs
# building for production (e.g. AWS, Google Cloud, npm, Vercel, Netlify, et al.)
stacks build # select a specific build (follow CLI prompts)
stacks build:components # build Vue component library & Web Component library
stacks build:vue-components # build Vue 2 & 3-ready Component library
stacks build:web-components # build framework agnostic Web Component library (i.e. Custom Elements)
stacks build:functions # build function library
stacks build:pages # build SSG pages
stacks build:all # build all your code
# `stacks build` aliases
stacks prod
stacks prod:components
stacks prod:vue-components
stacks prod:web-components
stacks prod:functions
stacks prod:pages
stacks prod:all
stacks production # `stacks prod` alias
# sets your application key
stacks key:generate
stacks make:stack project
stacks make:component HelloWorld
stacks make:function hello-world
stacks make:page hello-world
stacks make:lang de
stacks make:notification welcome-email
stacks make:database cars
stacks make:table brands
stacks make:migration create_cars_table
stacks make:factory cars
stacks make:seed cars
stacks lint # runs linter
stacks lint:fix # runs linter and fixes issues
stacks commit # follow CLI prompts for committing staged changes
stacks release # creates the releases for the stack & triggers the Release Action (workflow)
stacks changelog # generates CHANGELOG.md
# when deploying your app/s to a remote server or cloud provider
stacks deploy
stacks deploy:docs
stacks deploy:functions
stacks deploy:pages
stacks deploy:all
# select the example to run (follow CLI prompts)
stacks example
stacks example:vue
stacks example:web-components
# you likely won't need to run these commands as they are auto-triggered, but they are available
stacks generate
stacks generate:entries
stacks generate:vue-compat
stacks generate:web-types
stacks generate:vscode-custom-data
stacks generate:ide-helpers
stacks generate:component-meta
stacks generate:all
# generates your application key
stacks key:generate
# generate your TypeScript declarations
stacks types:generate
stacks types:fix
# test your stack
stacks test # runs test suite
stacks test:unit # runs unit tests
stacks test:e2e # runs e2e tests
stacks test:coverage # runs test coverage
stacks test:types # runs typecheck
# the CLI may be triggered in any
# of the following syntax:
stx fresh
stacks fresh
bud fresh
buddy fresh
pnpm stx fresh
pnpm stacks fresh
pnpm buddy fresh
pnpm fresh
pnpm run fresh
pnpm run buddy freshRead more here about the Stacks CLI in the documentation.
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.
Web Component usage
npm install my-awesome-libraryAfter you installed your Stacks generated library, you can use a "Custom Element" (Web Component) in the following way:
<html>
<body>
<hello-world name="Jane Doe"></hello-world>
<script src="my-awesome-library.js"></script>
</body>
</html>Vue 2 & 3 usage
npm install my-awesome-libraryAfter you installed your Stacks generated library, you can use your Vue Components in the following way:
<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.
Functions usage
npm install hello-world-libraryAfter you installed your Stacks generated library, you can use your functions in the following way:
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.
Part of the Stacks ecosystem are the following first-party supported stacks:
- Table (Q4 - Data tables with ease)
- Calendar (Q4 - Add to Calendar utilities—iCal, Google, and more)
- Command Palette (Q4 -
⌘ + kfor the web) - Date Picker (Q4 - Beautiful, modern date picker)
- File Manager (Q4 - Build your own file manager—like Dropbox or Google Drive)
- Image (Q4 - Modern image experience)
- Video (Q4 - Modern video experience)
- Audio (Q4 - Modern audio experience)
- Web3 (Q4 - Solana support, cross-chain core. Ethereum & Cardano drivers coming.)
View our detailed roadmap/s here for more information. Additionally, you may find interesting information & examples over at Awesome Stacks.
pnpm testPlease see our releases page for more information on what has changed recently.
Please see CONTRIBUTING for details.
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using this package:
Join the Open Web Discord Server
Once we launch a usable Stacks version, we hope people will start enjoying it! Coming soon.
Many thanks to the following core technologies & people who have contributed to this package:
- Chris Breuer
- Dan Scanlon many thanks for donating the
stacksname on npm - All Contributors
The MIT License (MIT). Please see LICENSE for more information.
Made with ❤️