TypeScript Design

Open-source TypeScript projects categorized as Design
Edit details
Topics: #React #TypeScript #design-system #UI #CSS
Amplication: open-source Node.js backend code generator
An open-source platform that helps developers build backends without spending time on boilerplate & repetitive coding. Including production-ready GraphQL & REST APIs, DB schema, DTOs, filtering, pagination, RBAC, & more.
amplication.com
Sponsored

Top 23 TypeScript Design Projects

  • @blueprintjs/core

    A React-based UI toolkit for the web

    Project mention: An Overview of 25+ UI Component Libraries in 2023 | dev.to | 2023-09-10

    Blueprint : A collection of components for building data-intensive interfaces for desktops. It specifically states that it is not designed to work for mobile. It is most likely better for building internal tools, dashboards, and Electron apps. Blueprint is one of the few libs in this list that has a Date Picker component.

  • theme-ui

    Build consistent, themeable React apps based on constraint-based design principles

    Project mention: Making a Linux home server sleep on idle and wake on demand – the simple way | news.ycombinator.com | 2023-04-19

    Author here, apologies for the dark mode issue and thanks for flagging it -- looks to be an open bug in theme-ui (https://github.com/system-ui/theme-ui/issues/1602).

    I've just pushed a workaround that appears to have fixed it.

  • SurveyJS

    A Non-Cloud Alternative to Google Forms that has it all.. SurveyJS JavaScript libraries allow you to easily set up a robust form management system fully integrated into your IT infrastructure where users can create and edit multiple dynamic JSON-based forms in a no-code form builder. Learn more now.

  • pts

    A library for visualization and creative-coding

    Project mention: which technology or framework is used to create geometry-draggable canvas like this? | /r/Frontend | 2022-10-23

    Pts.js - (sorry - couldn't find an example quickly)

  • playroom

    Design with JSX, powered by your own component library.

  • alva

    Create living prototypes with code components.

  • plasmic

    Visual page builder and web design tool for any website or web app tech stack

    Project mention: Show HN: An open source visual editor for React | news.ycombinator.com | 2023-09-05

    How does this compare to https://www.plasmic.app/?

  • Bangumi

    :electron: An unofficial https://bgm.tv app client for Android and iOS, built with React Native. 一个无广告、以爱好为驱动、不以盈利为目的第三方客户端。简单比喻就是专门做 ACG 的类似豆瓣的应用。专门为移动端重新设计，内置大量加强、网页端难以实现的功能，且提供了相当的自定义选项，已适配 iOS / Android / WSA、mobile / 简单 pad、light / dark theme、移动端 SPA。

  • Amplication

    Amplication: open-source Node.js backend code generator. An open-source platform that helps developers build backends without spending time on boilerplate & repetitive coding. Including production-ready GraphQL & REST APIs, DB schema, DTOs, filtering, pagination, RBAC, & more.

  • Silex

    Silex live web creation, free/libre no-code website builder, next gen Webflow for the static web (by silexlabs)

    Project mention: Background image scrolling issue and widget misplacement after exporting from Silex Desktop | /r/css | 2023-06-16

    First of all, wouldn't it make more sense to post this issue in https://github.com/silexlabs/Silex/issues if you haven't yet (preferably as two separate issues)?

  • mirrorful

    Mirrorful UI is a free & open-source React component library. Customizable via a no code editor with Mirrorful Cloud.

    Project mention: Lot of discussions about setlists this tour, but at 63 songs across 10 concerts so far, I think... baby, we'll be fine. | /r/TheNational | 2023-06-01

    If you're at all into open-source, the code for this script is here on Github. Feel free to give it a star or make contributions. I want to improve it, but my full-time job is managing another open-source project.

  • mdbootstrap

    React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

  • stylebot

    Change the appearance of the web instantly

  • glisp

    Glisp is a Lisp-based design tool that combines generative approaches with traditional design methods, empowering artists to discover new forms of expression.

    Project mention: I wrote a new language to beat Figma | /r/ProgrammingLanguages | 2023-06-25

    Have you ever tried Glisp? IMO it is executed much better than yours because Lisp is a much better suited language. Anyways awesome idea!

  • neopop-web

    NeoPOP components library based on CRED's design system

  • xlayers

    ✨ Generate code from your design

    Project mention: free-for.dev | dev.to | 2022-11-08

    xLayers - Preview and convert Sketch design files into Angular, React, Vue, LitElement, Stencil, Xamarin and more (free and open source at https://github.com/xlayers/xlayers)

  • dev-resources

    A collaborative list of resources for developers

  • posthog.com

    Official docs, website, and handbook for PostHog.

    Project mention: Show HN: I spent 2 years building Tablane as a 17-year-old | news.ycombinator.com | 2023-01-06

  • design-system-builder

    Design System Builder

  • z

    〽️ 浮之静 (by lencx)

  • nextjs-components

    A collection of React components, transcribed from https://vercel.com/design.

  • parsers

    Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.

    Project mention: How do you make the devs life easier ? | /r/UXDesign | 2023-07-07

    Specify if also a good all-in-one tool I just found yesterday https://specifyapp.com/

  • object-gui

    Object GUI - Javascript Object GUI Editor

  • cider

    Card IDE (CIDEr) - Design game cards using HTML/Handlebars, CSS, and tabular data (by oatear)

    Project mention: I’m working on a prototype, are there templates for making cards? | /r/tabletopgamedesign | 2023-07-14

    You could give your hand at templating using Cider. https://github.com/oatear/cider

  • NotionLingo

    Elevate your vocabulary with our cutting-edge app! Our intuitive platform allows you to easily learn new words and phrases from your own Notion database!

    Project mention: I spend last 6 months figuring out if it makes sense to implement Clean Architecture approach on Frontend application. I wrote 21-minute long article where I deep dive into this topic. I hope it will interest you and force you in the future to start thinking about architecture at start of project :) | /r/reactjs | 2023-05-01

    For people who are interested in the repo code where I implemented everything, please look here: https://github.com/Levofron/NotionLingo

  • Appwrite

    Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-09-10.

TypeScript Design related posts

Index

What are some of the best open-source Design projects in TypeScript? This list will help you:

Project Stars
1 @blueprintjs/core 20,073
2 theme-ui 5,092
3 pts 5,026
4 playroom 4,364
5 alva 3,747
6 plasmic 2,804
7 Bangumi 2,070
8 Silex 1,745
9 mirrorful 1,392
10 mdbootstrap 1,370
11 stylebot 1,269
12 glisp 938
13 neopop-web 912
14 xlayers 806
15 dev-resources 764
16 posthog.com 248
17 design-system-builder 245
18 z 153
19 nextjs-components 146
20 parsers 97
21 object-gui 63
22 cider 62
23 NotionLingo 37

Sponsored
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.
www.sonarsource.com