A lightweight frontend starter built with Sigment, powered by Vite and written in TypeScript. Easily extendable with Express.js for backend needs.

View Live Application →

# Clone this repository
git clone https://github.com/sigmentjs/basic-sigment-typescript-vite.git
cd basic-sigment-typescript-vite

# Install dependencies
npm install

# Start development server
npm run dev

npx create-sigment-app my-app
cd my-app
npm run dev

• 🯉 Sigment — Fine-grained, signals-based reactivity
• ⚡ Vite — Fast dev server and production bundling
• 📜 TypeScript — Type-safe development
• 🌿 Express-ready — Optional backend support
• 🎨 Syntax Highlighting — Code examples with Prism.js
• 🧩 Custom Elements — Extensible Sigment components
• 📱 Responsive Design — Mobile-friendly UI

Elegant, zero-JSX reactivity with less than 5KB runtime.

import { signal } from 'sigment';

function Counter(): HTMLElement {
  const [count, setCount] = signal(0);

  return div({ id: "counter" },
    h2('Sigment Reactive Framework'),
    h3('Counter example'),
    button({ onClick: () => setCount(count() + 1) }, 'Increment'),
    p(() => `Count is: ${count()}`)
  );
}

export default Counter;

✅ Reactive DX: Signals-based reactivity
✅ Tiny footprint: <5kb runtime
✅ Zero JSX: Pure JavaScript templates

src/
├── components/
│   ├── Counter.ts          # Reactive counter with navigation
│   ├── CodeExamples.ts     # Syntax highlighted examples
│   ├── Hello.ts            # Custom sigment element demo
│   ├── Home.ts             # Landing page
│   └── sigments/           # Custom Sigment elements
├── assets/css/             # Stylesheets and themes
└── Main.ts                 # Application entry point

• npm run dev - Start development server (port 3000)
• npm run build - Build for production
• npm run preview - Preview production build
• npm start - Start Express server (production)
• npm run serve - Start Express server (development)

This project is automatically deployed to Netlify:

• Production URL: https://lustrous-platypus-172c72.netlify.app/
• Auto-deploy: Pushes to main branch trigger new deployments
• SPA Support: Configured with proper redirects for client-side routing

1. Click the "Open in Bolt" badge above
2. Make your changes in the Bolt environment
3. Deploy directly from Bolt or export to GitHub

1. Fork this repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

# Start development
npm run dev

# Build and test
npm run build
npm run preview

# Deploy (automatic via Netlify)
git push origin main

• 🔗 Live Demo
• 📖 Sigment Documentation
• ⚡ Vite Documentation
• 📘 TypeScript Documentation

• Reactive Counter: Demonstrates Sigment's signal-based reactivity
• Custom Elements: Shows how to create custom Sigment components
• Code Examples: Syntax-highlighted code samples with copy functionality
• Navigation: Back buttons and home navigation
• Responsive Design: Mobile-first CSS with modern styling
• Production Ready: Optimized build with Express.js server support

MIT - Feel free to use this project for learning and building!

Built with ❤️ using Sigment, TypeScript, and Vite