Use when working with STX templates in a Stacks application — template syntax, components, directives, signals, reactivity, SSR, streaming, hydration, or debugging STX rendering. STX is the ONLY templating system for Stacks.
STX is the full-stack templating and component framework for Stacks. It handles template rendering, reactivity, SSR, streaming, hydration, and more.
config/stx.tsbun-plugin-stx (loaded via bunfig.toml).stx/resources/components/resources/layouts/resources/partials/resources/views/@stacksjs/stxvar, document.*, window.* in STX templates<script> tags should ONLY contain stx-compatible code (signals, composables, directives)<template>
<div class="container">
<h1>{{ title }}</h1>
<p x-if="showDescription">{{ description }}</p>
<button @click="increment">Count: {{ count }}</button>
</div>
</template>
<script>
import { ref, computed } from '@stacksjs/composables'
const count = ref(0)
const title = ref('Hello STX')
const showDescription = ref(true)
function increment() {
count.value++
}
</script>
<style>
/* Use crosswind utility classes or custom CSS */
.container { max-width: 1200px; margin: 0 auto; }
</style>
import type { StxOptions } from '@stacksjs/stx'
export default {
componentsDir: 'resources/components',
layoutsDir: 'resources/layouts',
partialsDir: 'resources/partials',
} satisfies StxOptions
interface StxConfig {
enabled: boolean
debug: boolean
componentsDir: string
partialsDir: string
layoutsDir?: string
defaultLayout?: string
templatesDir?: string
cachePath: string
ssr?: boolean
cache?: boolean
defaultTitle?: string
defaultDescription?: string
// Feature modules
i18n?: Partial<I18nConfig>
webComponents?: Partial<WebComponentConfig>
streaming?: Partial<StreamingConfig>
hydration?: Partial<HydrationConfig>
a11y?: Partial<A11yConfig>
seo?: Partial<SeoFeatureConfig>
animation?: Partial<AnimationConfig>
markdown?: Partial<MarkdownConfig>
forms?: Partial<FormConfig>
pwa?: Partial<PwaConfig>
components?: Partial<ComponentConfig>
media?: Partial<MediaConfig>
strict?: boolean | StrictModeConfig
customDirectives?: CustomDirective[]
}
# bunfig.toml
[serve]
plugins = ["bun-plugin-stx"]
The STX plugin processes .stx files during serve and build.
import { createProject, addComponent, addPage, addStore, addLayout } from '@stacksjs/stx'
// Create a new project
await createProject('my-app', { template: 'dashboard' })
// Add to existing project
await addComponent('UserCard', { props: true, styles: true })
await addPage('about', { layout: 'default' })
await addStore('cart', { persist: true, actions: true })
await addLayout('admin', { nav: true, footer: true })
default, minimal, full, blog, dashboard, landing
bun-plugin-stx must be loaded — without it, .stx files won't be processedstorage/framework/browser-auto-imports.json.stx/ directory — contains STX-specific state and cacheref() and computed() from STX are not Vue's implementationresources/ — not in app/ or storage/