Web Development
Build browser-based projects with JavaScript and TypeScript
Overview
Build web-based projects for Playcademy using JavaScript, TypeScript, and modern web frameworks
New to Playcademy?
This guide assumes familiarity with the platform.
If this is your first time, start with Quick Start.
Templates
Get started quickly with pre-configured project templates.
JavaScript Template
Minimal setup with vanilla JavaScript:
bunx tiged superbuilders/playcademy-vite-template-js my-projectcd my-projectbun installbun devnpx tiged superbuilders/playcademy-vite-template-js my-projectcd my-projectnpm installnpm run devpnpm dlx tiged superbuilders/playcademy-vite-template-js my-projectcd my-projectpnpm installpnpm devyarn dlx tiged superbuilders/playcademy-vite-template-js my-projectcd my-projectyarn installyarn devIncludes:
- Vite configuration with Playcademy plugin
- SDK initialization example
- Basic project structure
TypeScript Template
Type-safe development with TypeScript:
bunx tiged superbuilders/playcademy-vite-template-ts my-projectcd my-projectbun installbun devnpx tiged superbuilders/playcademy-vite-template-ts my-projectcd my-projectnpm installnpm run devpnpm dlx tiged superbuilders/playcademy-vite-template-ts my-projectcd my-projectpnpm installpnpm devyarn dlx tiged superbuilders/playcademy-vite-template-ts my-projectcd my-projectyarn installyarn devIncludes:
- Full TypeScript configuration
- Type-safe SDK usage examples
- Modern build tooling
React + TypeScript Template
React-based projects with hooks and components:
bunx tiged superbuilders/playcademy-vite-template-react my-projectcd my-projectbun installbun devnpx tiged superbuilders/playcademy-vite-template-react my-projectcd my-projectnpm installnpm run devpnpm dlx tiged superbuilders/playcademy-vite-template-react my-projectcd my-projectpnpm installpnpm devyarn dlx tiged superbuilders/playcademy-vite-template-react my-projectcd my-projectyarn installyarn devIntegrating with Existing Projects
Adding to Vite Projects
If you already have a Vite project:
Install Dependencies & Initialize
$ playcademy init$ playcademy vite configThis will:
- Install project dependencies
- Create
playcademy.config.js - Install and configure
@playcademy/vite-plugin
Initialize SDK in Your App
import { PlaycademyClient } from '@playcademy/sdk'
const client = await PlaycademyClient.init()Using the Playcademy CLI
For complete CLI workflows, see CLI Development and CLI Deployment.
Integrating with Other Frameworks
Coming Soon
Full-stack framework integrations (Next.js, Remix, SvelteKit, etc.) are coming soon.
These frameworks bring their own backends, so integration requires:
- Browser SDK for frontend (
@playcademy/sdk) - Server SDK for backend (
@playcademy/sdk/server)
We're working on framework-specific packages (think: @playcademy/svelte) to make this easier.
For now, we recommend using Vite (with @playcademy/vite-plugin) for the best developer experience.