Svelte & Bootstrap

Svelte Overview

Svelte is a modern JavaScript framework (technically, a compiler) for building fast and reactive user interfaces. Unlike traditional frameworks like React or Vue, Svelte compiles your code at build time rather than interpreting it at runtime. This means it generates highly efficient JavaScript that updates the DOM surgically when the state of your app changes.

In simple words:

👉 Svelte shifts work from the browser to the build step.

👉 It produces minimal, optimized code that runs blazingly fast.

Key Features:

• No Virtual DOM: Svelte does not use a virtual DOM. Instead, it compiles your components into tiny, framework-less JavaScript updates that manipulate the DOM directly.
• Truly Reactive: Reactivity in Svelte is built into the language. You simply reassign a value (e.g., count += 1), and the UI updates automatically — no need for .setState() or hooks.
• Small Bundle Sizes: Since Svelte compiles out the framework, the resulting app size is smaller compared to other frameworks. Less code means faster loading and better performance.
• Easy to Learn: Svelte syntax feels like writing plain HTML, CSS, and JavaScript, but enhanced with powerful features like reactivity, transitions, and stores.
• Built-in Animations and Transitions: Svelte provides easy ways to animate DOM elements without relying on external libraries.
• Scoped Styles: Styles written in Svelte components are scoped to that component by default, preventing CSS conflicts.
• Stores for State Management: Svelte has a simple but powerful state management solution (called “stores”) built-in, useful for global state sharing.

How Svelte Works

1. Write Components: You create .svelte files that contain HTML, CSS, and JavaScript, all together.
2. Build Step: At build time (using tools like Vite, Rollup, or Webpack), Svelte compiles your .svelte files into efficient vanilla JavaScript.
3. Runtime: In production, your app runs without needing a framework — only the compiled JavaScript manages UI updates.

Svelte vs Other Frameworks

Svelte is often compared to other popular JavaScript frameworks like React and Vue. Here's how they stack up:

Key Differences

• No Virtual DOM:
  Svelte compiles components to highly optimized JavaScript that directly manipulates the DOM, while React and Vue use a Virtual DOM for updates.

• Built-in Reactivity:
  In Svelte, reactivity is part of the language. You just reassign variables, and the UI updates automatically. No need for hooks or proxies.

• Smaller Bundles:
  Because Svelte compiles away at build time, the runtime overhead is minimal. React and Vue carry larger runtimes, affecting bundle size.

• Developer Experience:
  Svelte offers a simpler, more intuitive coding experience, especially for beginners. React and Vue are powerful but introduce more concepts like hooks, refs, and lifecycles.

When to Choose Svelte

• You want the fastest possible UI updates.
• You want smaller app sizes with no heavy runtime.
• You prefer writing less boilerplate code.
• You are building highly interactive widgets or fast web apps.

💡 Tip:
SvelteKit (the full-stack framework built on top of Svelte) offers even more advantages if you're building server-side rendered (SSR) or static sites — much like Next.js for React or Nuxt for Vue.

Example: A Simple Counter in Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

✅ No hooks ✅ No extra boilerplate ✅ Reactive automatically

Note:
Svelte offers a fresh take on front-end development by focusing on compilation rather than interpretation. It provides a beautiful developer experience, high performance, and minimal runtime overhead. If you value simplicity, speed, and a clean syntax, Svelte is definitely worth trying — especially for modern web apps, dashboards, internal tools, and interactive websites.

Getting started

1. Unzip the Trezo bundle.
2. Navigate to the svelte-bootstrap directory.
3. Install dependencies and start the development server:

npm install
npm run dev

4. Open your browser and visit:

http://localhost:5173

Note: Make sure you have Node.js version 22.14.0 or higher installed.

🛠️ Need Assistance?

If you need any help or have any questions, please don't hesitate to reach out to us via https://support.envytheme.com.

We are always here to assist you! Your satisfaction is extremely important to us. We truly value our beloved customers and treat every support request with special care.

Feel free to ask anything — we’ll be happy to help!

📄 How to Create a New Page in Trezo Svelte Bootstrap

Go to the src/routes folder (or wherever the other pages are stored).

Folder structure:

src/
├── lib/
│ ├── actions/ # Reusable form actions or utilities
│ ├── assets/ # Static assets (CSS, icons, fonts, etc.)
│ ├── components/ # Reusable Svelte components (buttons, cards, sections)
│ ├── stores/ # Svelte writable or readable stores (state management)
│ └── index.js # Barrel file to re-export libraries (optional)
│
├── routes/
│ ├── auth/ # Authentication pages (login, register, etc.)
│ ├── contact/ # Contact page
│ ├── dashboard/ # Dashboard page (after login or for admins)
│ ├── faqs/ # FAQs page (Frequently Asked Questions)
│ ├── features/ # Features page (list of app features)
│ ├── our-team/ # Team members page
│ ├── +layout.svelte # Layout component shared by all pages
│ ├── +layout.js # Layout-level load functions (if needed for data fetching)
│ ├── +page.svelte # Home page (landing page)
│
├── app.html # Entry HTML file (template used by SvelteKit)
│
static/
├── assets/images/ # Public images folder (accessed directly by URL)
├── favicon.png # Site favicon

Important Things to Understand:

• src/lib/: Your reusable app logic (components, assets, utilities).
• src/routes/: Page-based routing — the folder names define the URL paths!
• /contact URL = src/routes/contact/+page.svelte
• /dashboard URL = src/routes/dashboard/+page.svelte
• /our-team URL = src/routes/our-team/+page.svelte
• +layout.svelte: Common layout (like header/footer) applied to all pages automatically.
• +page.svelte: Defines what shows up for that route.

How to Create a New Page

1. Inside src/routes/, create a new folder for the page.

   Example: src/routes/pricing/

2. Inside that folder, create a file named +page.svelte.

3. Now when you visit /pricing in your browser, it will automatically show!

Example structure:

src/routes/pricing/+page.svelte

Example content:

<script>
  // You can write logic here if needed
</script>

<section>
  <h1>Pricing</h1>
  <p>Choose the plan that suits you best!</p>
</section>

✅ No need to manually define routes — SvelteKit auto-detects it based on your folders!

Conclusion

Trezo Svelte + Bootstrap, built with SvelteKit, offers a modern, efficient, and highly structured way to develop web applications.

Thanks to SvelteKit’s powerful file-based routing and Trezo's clean component architecture, creating new pages, managing layouts, and organizing assets is straightforward and intuitive.

By following the provided project structure:

• You can easily scale your application by adding new features and pages.
• You maintain clean, maintainable, and reusable code across your project.
• You ensure a fast and responsive user experience with minimal overhead.

If you ever need any assistance, have questions, or require customization help, please don't hesitate to reach out to us at https://support.envytheme.com.
We are always here to assist you — your satisfaction is our highest priority!

Happy Building! 🚀