Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work. Learn more →
Top 23 TypeScript Svelte Projects
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
Project mention: Advice on starting a design system / component library | reddit.com/r/FigmaDesign | 2023-01-31Have you explored using storybook ? I've seen it be really helpful for these types of challenges if incrementally adopted.
-
NativeScript
⚡ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love ❤️ Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.
Project mention: The right way to build multi platform apps in 2023 using web tech. ? | reddit.com/r/webdev | 2023-01-31There are layers that offer access to native APIs like capacitor, cordova and nativescript. Apparently sometimes multiple of them should be used, but I didn't understand what are the differences even after reading the announcement. These seem to be frontend agnostic technologies and Capacitor is apparently the more modern choice at the moment.
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
react-table
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
-
mitosis
Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.
I discovered https://github.com/BuilderIO/mitosis, and it has changed my front-end development workflow with the ability to create one development and export and test metrics on multiple front-ends delivering the best MVP possible.
-
-
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
Project mention: Create Beautiful Animations by Integrating Particles.js With React | dev.to | 2023-01-25You’re almost done! You just have to configure your particles/objects in order of animation, interaction, direction, opacity, etc. For this illustration, you’ll be using an already preset configuration from the tsparticles repository, but you can always tweak it to your own style or create one from scratch if you’d like.
-
router
🤖 Type-safe router w/ built-in caching & URL state management for JS/TS, React, Preact, Solid, Vue, Svelte and Angular
Project mention: TanStack Router - Typesafe, state-management APIs, caching, framework agnostic | reddit.com/r/reactjs | 2022-11-10Start a discussion about what you'd like to see and I'll do my best. https://github.com/tanstack/router/discussions
-
InfluxDB
Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.
-
Another solution could be virtualization (but perhaps that’s what you meant by lazy loading). Here’s a great lib for that: https://github.com/TanStack/virtual
-
splide
Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
I used https://splidejs.com/ in recent projects.
-
Seems to be a known issue: https://github.com/bytedance/bytemd/issues/96
-
Embla Carousel
www.embla-carousel.com - A lightweight carousel library with fluid motion and great swipe precision.
Project mention: react2svelte/image-gallery: Svelte carousel image gallery component with thumbnail and mobile swipe support, ported from react-image-gallery (demo linked inside) | reddit.com/r/sveltejs | 2023-01-13Did you try embla-carousel?
-
-
svelte-nodegui
Build performant, native and cross-platform desktop applications with native Svelte + powerful CSS-like styling.🚀
-
vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Vime is a simple React framework that provides a flexible, expandable media player that can be used with a variety of Javascript frameworks like React, Vue, Angular, and Svelte. This project will utilize a sample clip from the Vime documentation.
-
Vitest Preview helps you to write and debug tests faster by allowing you to visualize your test in a browser. If you are familiar with Jest, you know that the Jest community has a similar debugging tool, Jest Preview, created by the same developer, Hung Viet Nguyen. To learn more about testing with Jest, check out our video guide here.
-
elderjs
Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.
Does someone has experience with headless static sites generator that uses svelte with an optimized SEO in mind? I'm currently testing https://github.com/sveltejs/kit but I ran into some problems into building using static-adapter (index.html without static content, metatags being generetad by JS and not inside html file) so I'm currently testinghttps://github.com/elderjs/elderjs and https://github.com/withastro/astro and I would like to know if someone has any experience using svelte to build "simple" projects without the need of client side routing or SSR, just a plain old html, js and css build. Thanks!
-
After designing your user interface within Figma, teams can utilize a plugin like Builder.io to turn the beautiful and functional look into code.
-
PWA is created with vite-pwa/vite-plugin-pwa, and its parameters are set in vite.config.js. In summary, the implementation of PWA was not a project aim, but it did provide good caching of all project components and resulted in a very quick reopening of the site.
-
egjs-infinitegrid
A module used to arrange card elements including content infinitely on a grid layout.
-
svelte-preprocess
A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
svelte-preprocess should handle scss out-of-the-box, and it’s included in SvelteKit by default if you created your project with create-svelte
-
ninja-keys
Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React, Svelte.
-
selecto
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.
Selecto.js : a component that allows you to select elements in the drag area using the mouse or touch.
-
SyncedStore
SyncedStore CRDT is an easy-to-use library for building live, collaborative applications that sync automatically.
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
TypeScript Svelte related posts
- What do you think about handling protected routes and redirects in middleware?
- SvelteKit with K8s
- Website Erstellung - State of the Art
- Is Svelte drowning in issues?
- Show HN: I made yet another create-electron-app
- sveltekit documentation is bad, who can i ask to improve it?
- Passing event handlers in $$restProps? (ex. creating a wrapped <Input /> component)
-
A note from our sponsor - Sonar
www.sonarsource.com | 1 Feb 2023
Index
What are some of the best open-source Svelte projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | storybook | 76,268 |
2 | NativeScript | 22,111 |
3 | react-table | 20,491 |
4 | mitosis | 7,930 |
5 | windicss | 6,061 |
6 | tsParticles | 4,767 |
7 | router | 4,392 |
8 | virtual | 3,806 |
9 | splide | 3,534 |
10 | bytemd | 3,351 |
11 | Embla Carousel | 2,893 |
12 | FigmaToCode | 2,816 |
13 | svelte-nodegui | 2,737 |
14 | vime | 2,412 |
15 | jest-preview | 2,073 |
16 | elderjs | 2,051 |
17 | html-figma | 1,978 |
18 | vite-plugin-pwa | 1,748 |
19 | egjs-infinitegrid | 1,514 |
20 | svelte-preprocess | 1,511 |
21 | ninja-keys | 1,302 |
22 | selecto | 1,232 |
23 | SyncedStore | 1,142 |