Switch to Bascik

Switch to Bascik

Switching an existing site to Bascik lets you replace complex client-side framework runtimes and heavy bundlers with standard vanilla HTML, CSS, and JavaScript. Bascik compiles your components at build time, yielding fast pages and zero client runtime overhead.

What Bascik Delivers

• Fast, Clean Delivery: Content-driven websites, marketing pages, company portals, documentation, web applications, and digital products where fast load times, SEO, and low maintenance matter.
• Full Architectural Freedom: Static pages, dynamic server scripts, streaming slots, and API routes are all supported out of the box without locking you into a client runtime.

Transferable Knowledge

Most of what you already know translates directly to Bascik:

• Component Thinking: You still break UIs into reusable pieces like headers, cards, and footers.
• File-Based Routing: Your URL structure maps directly to files under src/pages/.
• Standard Web APIs: You write standard HTML tags, modern CSS, and vanilla DOM JavaScript without proprietary framework wrappers.

A Low-Risk First Step

You do not need to convert your entire project at once. A good first step is migrating a single content page and a shared card component:

1. Create a new Bascik project with npm create bascik@latest my-site.
2. Extract one reusable UI block into src/components/post-card/post-card.html.
3. Create src/pages/index.html and use <post-card></post-card>.
4. Run npm run dev to inspect your zero-JS output immediately.

How to Switch

The transition follows a consistent five-step workflow:

1. Extract Components

Move repeating markup patterns (such as navigation, footers, cards, or buttons) into .html files in src/components/. The hyphenated filename becomes the component tag name.

2. Map Slots and Props

Replace framework-specific slots and properties with Bascik equivalents:

• Map children in React or <slot> in Vue/Svelte to data-bascik-slot.
• Map plain text values to data-bascik-prop-* attributes. For element attributes, use data-bascik-attr-*. For rich HTML content, use named slots (data-bascik-slot="name").

3. Handle Scoped Styles

Write modern CSS in paired .css files (e.g. src/components/post-card/post-card.css) or inline <style> tags. Bascik scopes class names and deduplicates CSS automatically. If your project uses Tailwind CSS, you can continue using Tailwind via PostCSS.

4. Set Up Pages and Routes

Place static .html files in src/pages/. For parameterized routes like blogs, use Dynamic Routes with [slug].html templates.

5. Retain Interactive JS

Write standard vanilla JavaScript in <script> tags inside components for client interactivity. Bascik automatically isolates instance IDs so multiple components do not clash.

What Maps to What