Vanilla TypeScript starting point, without introducing UI frameworks such as React, writing native HTML and TS directly
ViteHTMLCorporate WebsiteStarter
vite-vanilla-ts — Vite Business Template
By doinel1a
A Vite-based Vanilla TypeScript frontend starter template with built-in TailwindCSS, SASS, PostCSS, Playwright, and development tool configurations for ESLint, Prettier, Husky, Commitlint, and more.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-01View source
What stands out
A quick read of the recorded project description.
The build tool is Vite; the README explains that it follows a zero-configuration approach and supports the SWC compiler
The styling layer comes with TailwindCSS, SASS, and PostCSS preset
Playwright is integrated for end-to-end testing
Developer experience tools include ESLint, Prettier, Husky, and Commitlint; commits must follow the conventional commit format
Browser coverage is controlled via .browserslistrc; the default configuration covers approximately 92.3% of browsers
Template Details
This is a Vanilla TypeScript project starter template for frontend developers. It uses Vite as the build tool and does not depend on frameworks such as React, making it suitable for websites, single-page applications, or landing pages written directly in native HTML and TypeScript. The template comes preconfigured with TypeScript, TailwindCSS, SASS, PostCSS, and Playwright, and integrates developer experience tools including ESLint, Prettier, Husky, and Commitlint. Its purpose is to eliminate the need to set up a development environment from scratch every time a new project is created.
For usage, the repository offers two ways to get started: "Use this template" or Fork, and it can also be cloned locally via git clone. Installing dependencies and running the development server, building the production version, and previewing the production build correspond to the four script commands install, dev, build, and preview. The README also provides the syntax for NPM, PNPM, and Yarn package managers. The only prerequisite is the Node.js runtime; PNPM and Yarn are optional.
Browser support is controlled by .browserslistrc, with the default configuration being last 3 versions, > 0.2%, not dead. The README states that this configuration covers approximately 92.3% of browsers and notes that the more versions supported, the larger the JS and CSS bundle size. The repository uses the MIT license, but the README explicitly states that all logos and trademarks belong to their respective owners, and third-party assets such as demo images, fonts, and icons still need to be checked separately under their own licenses. The template itself does not include a backend, database, or deployment configuration; it is a pure frontend starting point.
ViteHTMLCorporate websiteStarter
Is it right for your project?
Use Cases
- Quickly starting a native TypeScript website or landing page without configuring the build and linting from scratch
- Building lightweight single-page applications or static pages that do not depend on a frontend framework
- Using it as a starting repository for a team to standardize ESLint, Prettier, commit conventions, and testing tools
- Experimenting with TailwindCSS and SASS styling approaches in a Vite + TypeScript environment
Suitable For
- Frontend developers familiar with TypeScript who want to use native DOM rather than a framework
- Team projects that need standardized code linting and Git commit conventions
- Sites focused on static pages or pure frontend interactions that do not require backend rendering
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
The prerequisite is Node.js; PNPM and Yarn are optional alternative package managers
- 2
The repository can be obtained via GitHub's Use this template, Fork, or git clone
- 3
Common scripts are install, dev, build, and preview; the README provides syntax for NPM, PNPM, and Yarn
- 4
Browser coverage is adjusted in .browserslistrc; expanding the support range increases the JS and CSS bundle size
- 5
The code uses the MIT license, but logos, trademarks, and third-party assets such as demo images, fonts, and icons must be checked under their respective licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The README explicitly states that all logos and trademarks belong to their respective owners and are not covered by the MIT license; when using commercially or redistributing, you must confirm the usage rights for these marks yourself.
- Apart from logos and trademarks, the code content is under the MIT license and may be freely used, modified, and redistributed, but copyright and license notices must be retained.
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
All logos and trademarks are the property of their respective owners.
Original README
https://github.com/doinel1a/vite-vanilla-ts/blob/main/LICENSEhttps://github.com/doinel1a/vite-vanilla-ts/blob/main/README.mdEverything else is distributed under the **MIT License** .
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-01. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 92 / 100
- Technologies
- Vite · HTML
- Website type
- Corporate Website · Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-09-11
- Screenshot last checked
- 2026-10-01
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: 89d26abc8ec9037d543db2997e711bd53963053107ee69667df782091a0e0719
2026-10-01T01:54:46.181Z
Source file / repository[node]: https://nodejs.org/en
[yarn]: https://yarnpkg.com
[pnpm]: https://pnpm.io
[demo]: https://vite-vanilla-ts.d1a.app
[license]: https://github.com/doinel1a/vite-vanilla-ts/blob/main/LICENSE
[code-of-conduct]: https://github.com/doinel1a/vite-vanilla-ts/blob/main/CODE_OF_CONDUCT.md
[issues]: https://github.com/doinel1a/vite-vanilla-ts/issues
[pulls]: https://github.com/doinel1a/vite-vanilla-ts/pulls
[browserslist]: https://browsersl.ist/#q=last+3+versions%2C%3E+0.2%25%2C+not+dead
[graphviz]: https://www.graphviz.org/download
[commitlint]: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
[vite-react-ts-repo]: https://github.com/doinel1a/vite-react-ts-starter
[vite-react-js-repo]: https://github.com/doinel1a/vite-react-js-starter
[vite-vanilla-ts-repo]: https://github.com/doinel1a/vite-vanilla-ts
[vite-vanilla-js-repo]: https://github.com/doinel1a/vite-vanilla-js
[wp-react-ts-repo]: https://github.com/doinel1a/react-ts-starter
[wp-react-js-repo]: ''
[wp-vanilla-ts-repo]: ''
[wp-vanilla-js-repo]: https://github.com/doinel1a/webpack-vanilla-js
[react-icon]: https://skillicons.dev/icons?i=react
[ts-icon]: https://skillicons.dev/icons?i=ts
[js-icon]: https://skillicons.dev/icons?i=js
[tailwind-icon]: https://skillicons.dev/icons?i=tailwind
[chrome-icon]: https://github.com/alrra/browser-logos/blob/main/src/chrome/chrome_64x64.png
[firefox-icon]: https://github.com/alrra/browser-logos/blob/main/src/firefox/firefox_64x64.png
[edge-icon]: https://github.com/alrra/browser-logos/blob/main/src/edge/edge_64x64.png
[opera-icon]: https://github.com/alrra/browser-logos/blob/main/src/opera/opera_64x64.png
[safari-icon]: https://github.com/alrra/browser-logos/blob/main/src/safari/safari_64x64.png
# Vite Vanilla TypeScript — Template
Are you looking for a way to supercharge your development experience and build stunning web applications with ease? You are in the right place!
This development starter template is the ultimate solution to help you getting started on your project in no time, without the hassle of setting up and configuring your development environment from scratch each time you start working.
This template is ideal for front-end developers who want to build modern, fast and reliable web applications with the latest cutting edge technologies such as **TypeScript**, **TailwindCSS**, **ESLint**, **Prettier**, **Husky**, **Vite** and much more!
---
**[Demo][demo]** **|** **[Bug(label: bug)][issues]** **|** **[Feature(label: enhancement)][issues]**
---
## :bookmark: Table of contents
- :computer: [Getting started](#computer-getting-started "Go to 'Getting started' section")
- :battery: [Features](#battery-features "Go to 'Features' section")
- :arrows_clockwise: [Versions](#arrows_clockwise-versions "Go to 'Versions' section")
- :globe_with_meridians: [Browsers support](#globe_with_meridians-browsers-support "Go to 'Browsers support' section")
- :busts_in_silhouette: [Contribute](#busts_in_silhouette-contribute "Go to 'Contribute' section")
- :bookmark_tabs: [License](#bookmark_tabs-license "Go to 'License' section")
- :gem: [Acknowledgements](#gem-acknowledgements "Go to 'Acknowledgements' section")
---
## :computer: Getting started
### Prerequisites:
- JavaScript runtime **[node.js][node]**;
- **(OPTIONAL)** Alternative package manager:
- **[PNPM][pnpm]** `npm install --global pnpm` <br /> or
- **[Yarn][yarn]** `npm install --global yarn`
### Start developing:
- Get the repository:
- click **"Use this template"** or **"Fork"** button <br /> alternately
- **clone** the repository through your terminal: <br />
`git clone https://github.com/doinel1a/vite-vanilla-ts YOUR-PROJECT-NAME`;
- Open your terminal or code editor to the path your project is located, and run:
| | **NPM** | **PNPM** | **Yarn** |
| ------------------------------------------------ | ----------------- | -------------- | -------------- |
| To **install** the dependencies | `npm install` | `pnpm install` | `yarn install` |
| To **run** the **development server** | `npm run dev` | `pnpm dev` | `yarn dev` |
| To **build** your app **for production** | `npm run build` | `pnpm build` | `yarn build` |
| To **preview** your **production optimized app** | `npm run preview` | `pnpm preview` | `yarn preview` |
[Back to :arrow_up:](#vite-vanilla-typescript--template "Back to 'Table of contents' section")
---
## :battery: Features
This repository comes 🔋 packed with:
- **TypeScript**;
- **TailwindCSS**;
- **SASS**;
- **PostCSS**;
- **Playwright**;
- **Vite**;
And with tools that enhance the development experience:
- **ESLint**;
- **Prettier**;
- **Husky**;
- **Commitlint**;
[Back to:arrow_up:](#vite-vanilla-typescript--template "Back to 'Table of contents' section")
---
## :arrows_clockwise: Versions
This repository comes configured with 2 of the industry standards for development tools: **Webpack** and **Vite**. <br />
Both tools support **SWC (Speedy Web Compiler)**, a **Rust-based compiler**; Vite is optimized for it out of the box.
### Vite (SWC compiler)
Is a simple and fast solution thanks to it's "zero-config" approach which offers a smoother development experience.
| React - TypeScript | React - JavaScript | | Vanilla TypeScript | Vanilla JavaScript |
| :-------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :-: | :-------------------------: | :----------------------------------------------------: |
| ![React][react-icon] & ![TS][ts-icon] <br /> **[Repo][vite-react-ts-repo]** | ![React][react-icon] & ![JS][js-icon] <br /> **[Repo][vite-react-js-repo]** | | ![TS][ts-icon] <br /> **/** | ![JS][js-icon] <br /> **[Repo][vite-vanilla-js-repo]** |
### Webpack (Babel compiler)
Is more a flexible solution, capable of handling complex configurations.
| React - TypeScript | React - JavaScript | | Vanilla TypeScript | Vanilla JavaScript |
| :-----------------------------------------------------------------------: | :----------------------------------------------------: | :-: | :-----------------------------: | :--------------------------------------------------: |
| ![React][react-icon] & ![TS][ts-icon] <br /> **[Repo][wp-react-ts-repo]** | ![React][react-icon] & ![JS][js-icon] <br /> **Soon!** | | ![TS][ts-icon] <br /> **Soon!** | ![JS][js-icon] <br /> **[Repo][wp-vanilla-js-repo]** |
[Back to:arrow_up:](#vite-vanilla-typescript--template "Back to 'Table of contents' section")
---
## :globe_with_meridians: Browsers support
The provided configuration ensures **92.3%** coverage for all browsers, in particular of the following:
| Chrome | Firefox | Edge | Opera | Safari |
| :---------------------------: | :------------------------------: | :--------------------------: | :------------------: | ---------------------------- |
| ![Google Chrome][chrome-icon] | ![Mozilla Firefox][firefox-icon] | ![Microsoft Edge][edge-icon] | ![Opera][opera-icon] | ![Apple Safari][safari-icon] |
**\*** In order to support a wider percentage of browsers, update the `./.browserslistrc` configuration file:
1. `last 3 versions`: browser version;
2. `> 0.2%`: browser usage statistics;
3. `not dead`: whether the browser is officially supported;
Update the configuration [here][browserslist] and check in real-time the **global browsers support**.
**\* The more versions to support, larger JS and CSS bundles size will be.**
[Back to:arrow_up:](#vite-vanilla-typescript--template "Back to 'Table of contents' section")
---
## :busts_in_silhouette: Contribute
Contributions are what make the open source community such an amazing place to learn, inspire, and create.
Any contribution is greatly appreciated: big or small, it can be documentation updates, adding new features or something bigger.
Please check the [**contributing guide**][code-of-conduct] for details on how to help out and keep in mind that all commits must follow the **[conventional commit format][commitlint]**.
### How to contribute:
1. **[Get started](#computer-getting-started "Go to 'Getting started' section");**
2. **For a new feature:**
1. Create a new branch: `git checkout -b feat/NEW-FEATURE`;
2. Add your changes to the staging area: `git add PATH/TO/FILENAME.EXTENSION`;
3. Commit your changes: `git commit -m "feat: NEW FEATURE"`;
4. Push your new branch: `git push origin feat/NEW-FEATURE`;
3. **For a bug fix:**
1. Create a new branch: `git checkout -b fix/BUG-FIX`;
2. Add your changes to the staging area: `git add PATH/TO/FILENAME.EXTENSION`;
3. Commit your changes: `git commit -m "fix: BUG FIX"`;
4. Push your new branch: `git push origin fix/BUG-FIX`;
4. **Open a new [pull request][pulls];**
[Back to:arrow_up:](#vite-vanilla-typescript--template "Back to 'Table of contents' section")
---
## :bookmark_tabs: License
All logos and trademarks are the property of their respective owners.
Everything else is distributed under the **MIT License** .
See the [LICENSE][license] file for more informations.
[Back to:arrow_up:](#vite-vanilla-typescript--template "Back to 'Table of contents' section")
---
## :gem: Acknowledgements
Special thanks to:
- [alrra](https://github.com/alrra) for [browser-logos](https://github.com/alrra/browser-logos);
- [tandpfun](https://github.com/tandpfun) for [skill-icons](https://github.com/tandpfun/skill-icons);
[Back to:arrow_up:](#vite-vanilla-typescript--template "Back to 'Table of contents' section")
Explore similar templates
Compare previews and descriptions within the same stack and category.
react-starter-kit
A full-stack SaaS monorepo starter built on Vite and React, with Bun, TypeScript, tRPC, Drizzle ORM, Better Auth, Stripe, and Cloudflare Workers. It includes email OTP, passkey, Google OAuth, organizations, subscription billing, Drizzle migrations, seed scripts, and Terraform infrastructure.
Vite · SaaS
cove
Cove is a minimal TanStack Start starter template maintained by mugnavo, integrating React, TanStack Router/Query, Tailwind CSS, shadcn/ui, Drizzle ORM with PostgreSQL, Better Auth, Vite Plus, and Nitro.
Vite · SaaS
vite-react-boilerplate
A production-ready Vite + React starter template with TypeScript, Tailwind CSS, TanStack Router/Query/Table, Storybook, React Hook Form + Zod, Vitest and Playwright testing, plus Husky/Commitizen/Commitlint commit conventions.
Vite · Starter
business-website-template
A React, Tailwind CSS, and Vite corporate website template with a single-page structure covering header, hero, features, billing, product showcase, testimonials, clients, call-to-action, and footer.
Vite · Corporate Website
kiaalap
Kiaalap is a free, open-source admin template from Colorlib for education, online courses, and school management.
Vite · Admin dashboard
react-vite-admin
A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.
Vite · Admin dashboard