Guides
Vite
Use Gridland with Vite
Install
bun add @gridland/webnpm install @gridland/webyarn add @gridland/webpnpm add @gridland/webConfigure the Vite Plugin
Gridland provides a Vite plugin that handles module resolution for the
underlying opentui engine. Add it to your vite.config.ts:
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { gridlandWebPlugin } from "@gridland/web/vite-plugin"
export default defineConfig({
plugins: [
react(),
...gridlandWebPlugin(),
],
})Create Your Component
Wrap your TUI content in TUI:
import { TUI } from "@gridland/web"
function GridlandDemo() {
return (
<box flexDirection="column" padding={1}>
<box border borderStyle="rounded" borderColor="#88c0d0" padding={1}>
<text fg="#a3be8c">Hello from Vite!</text>
</box>
</box>
)
}
export default function App() {
return (
<TUI style={{ width: "100vw", height: "100vh" }}>
<GridlandDemo />
</TUI>
)
}