The goal of the Stacks framework is to help you create & maintain UIs (pages & components) & function (composables & APIs) libraries. The Stacks build system automatically builds highly-composable & scalable, framework-agnostic libraries—in beginner & expert-friendly ways, embodying Composability-First Design principles.
🤖 Zero-config, by design
The Stacks framework automagically bundles & builds your code. A Web Component library, Vue 2 & 3 libraries, a composable functions library or API, plus all of its relating type declarations. Out of plain HTML & minimal JavaScript. The best of the Vite & Nitro engines in a zero-config way.
🎨 Style with ease
Create your own style guide using conventions you are familiar with. Stacks' UnoCSS atomic engine allows for just that, in a blazing-fast, on-demand way. Tailwind CSS, Windi CSS, Bootstrap, Tachyons, Heroicons, Material Design Icons, and more to choose from.
✨ Next-gen Developer Experience (DX)
Whether it is the simplistic artisan setup & maintenance, the toolkit of accessible APIs, modern git commit conventions, a powerful, yet simple, CI, automated npm package releases & semver versioning, pretty changelog generations, automated PR dependency updates, built-in spell-checking, integrated documentation tooling, or the pre-configured examples... Stacks has it all.
💡 First-class VS Code integration
IDE Capabilities, such as type hints, code completion, code formatting, and more—all natively built-into Stacks. And without the need of Prettier.
🧙🏼♀️ Extremely beginner & expert-friendly
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.
Develop beautiful, reactive, composable UIs & functions without learning a new set of languages. HTML, CSS, and minimal JavaScript—that's all you need to dive in now! (Or TypeScript ✌🏼)
The clever way to build & share component & function libraries (and servers!).
It's incredibly easy to get started with this framework. Simply run the following command in your terminal:
npx artisan-init my-project
# alternatively, if unsure about your Node/pnpm setup, run:
curl -fsSL https://stacksjs.dev/setup | bashNote Node.js v18.10 or higher required. Artisan will set you up.
The following list is of some of the most common ways to interact with the Stacks API. Meet the Artisan Toolkit:
pnpm artisan install # installs all dependencies
pnpm artisan dev # starts one of the dev servers (components, functions, pages, or docs)
pnpm artisan build # follow CLI prompts to select which library (or server) to build
pnpm artisan commit # follow CLI prompts for committing changes
pnpm artisan release # creates the releases for the stack & consequently, publishes them to npm
pnpm artisan make:component HelloWorld # bootstraps a HelloWorld component
pnpm artisan make:function HelloWorld # bootstraps a HelloWorld function
pnpm artisan make:page hello-world # bootstraps a HelloWorld page (https://127.0.0.1/hello-world)
pnpm artisan helpView the complete Stacks Artisan Toolkit
pnpm artisan install # or `pnpm i`
pnpm artisan fresh # fresh reinstall of all deps
pnpm artisan dev # starts one of the dev servers (components, functions, pages, or docs)
pnpm artisan dev:components # starts local playground dev server
pnpm artisan dev:pages # starts local pages dev server
pnpm artisan dev:docs # starts local docs dev server
pnpm artisan make:component HelloWorld
pnpm artisan make:function hello-world
pnpm artisan make:page hello-world
pnpm artisan make:lang en
pnpm artisan make:stack hello-world
pnpm artisan stub # stubs all the libraries
pnpm artisan stub:components # stubs the component library
pnpm artisan stub:functions # stubs the function library
pnpm artisan stub:pages # stubs the pages
pnpm artisan lint # runs linter
pnpm artisan lint:fix # runs linter and fixes issues
pnpm artisan commit # follow CLI prompts for committing staged changes
pnpm artisan release # creates the releases for the stack & triggers the Release Action (workflow)
pnpm artisan changelog # generates CHANGELOG.md
# building for production (e.g. npm)
pnpm artisan build # select a specific build (follow CLI prompts)
pnpm artisan build:components # builds component libraries
pnpm artisan build:functions # builds function library
pnpm artisan build:web-components # builds framework agnostic Web Component library (i.e. Custom Elements)
pnpm artisan build:components # builds Vue 2 & 3 compatible libraries
# when building for Vercel, Netlify, and more
pnpm artisan deploy:docs
# creates a server to be deployed into any VPS
pnpm artisan server:functions # wip
pnpm artisan server:pages # wip
pnpm artisan example # select the example to run (follow CLI prompts)
# test your stack
pnpm artisan test # runs test suite
pnpm artisan test:unit # runs unit tests
pnpm artisan test:e2e # runs e2e tests
pnpm artisan test:coverage # runs test coverage
pnpm artisan test:types # runs typecheck
Read 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 (Q3 - Data tables with ease)
- Calendar (Q3 - Add to Calendar utilities—iCal, Google, and more)
- Command Palette (Q3 -
⌘ + kfor the web) - Date Picker (Q3 - Beautiful, modern date picker)
- File Manager (Q3 - Build your own file manager—like Dropbox or Google Drive)
- Image (Q3 - Modern image experience)
- Video (Q3 - Modern video experience)
- Audio (Q3 - Modern audio experience)
- Web3 (Q3 - Solana support, cross-chain core Ethereum & Cardano drivers coming.)
These stacks make great examples. Find more awesome Stacks here.
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
The MIT License (MIT). Please see LICENSE for more information.
Made with ❤️