🔥2023#49: StyleX: new CSS styling system by Meta
Tags: webdev, javascript, typescript, node
Published: 2023-12-14 18:15:35

Hi developers 👋
[JSTools Weekly](https://jstools.substack.com/) newsletter, issue [2023#49 (Hot JS Tools)](https://jstools.substack.com/p/202349-stylex-new-css-styling-system) just released.

---
 
![stylex: StyleX is the styling system for ambitious user interfaces](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1bcce183-c5b1-4bb9-bd4d-7721847638f5_930x499.png)
  

#### [stylex: StyleX is the styling system for ambitious user interfaces](https://stylexjs.com/)

StyleX (by Meta) is a JavaScript syntax and compiler for styling web apps. It combines the strengths of both inline and static CSS, while avoiding their weaknesses. It builds optimized styles using collision-free atomic CSS and provides a type-safe API. StyleX is scalable, predictable, composable, fast, and type-safe.

#### **[spotlight: ](https://spotlightjs.com/)**[Debug Toolbar for your Web App](https://spotlightjs.com/)

Spotlight is a developer tool that provides a rich debug overlay similar to the Django Debug Toolbar. It utilizes Sentry's SDKs to seamlessly integrate with web applications, enabling developers to identify and troubleshoot errors and performance issues during development.
 

![Spotlight](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6a860ee9-c530-4b3d-ab32-8e38f37beae6_5040x1890.jpeg "Spotlight")

 
[source](https://github.com/getsentry/spotlight)

#### [Fuse.js: The opinionated framework for creating typesafe data layers](https://fusejs.org/)

Fuse.js helps frontend teams to fetch data from APIs in a typesafe way, without need to wait for backend teams to update their APIs.

 

![Fuse.js: The opinionated framework for creating typesafe data layers](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1683deb2-e21a-43d7-a6b4-5380a88b8df9_1122x608.png)

[source](https://fusejs.org/)

#### **[tinyld: ](https://github.com/komodojp/tinyld)**[Simple and Performant Language detection library for NodeJS](https://github.com/komodojp/tinyld)

Tiny Language Detector, a lightweight language detection tool, offers seamless language identification for unicode UTF-8 text. It operates on pure Javascript, eliminating the need for external API calls or dependencies, and functions seamlessly across Node and Browser platforms. Its blazing-fast performance and minimal memory footprint make it suitable for tasks involving short texts, such as chatbot interactions and keyword extraction. It supports 62 languages (24 for web-based applications) and provides accurate language detection even for concise input. **[TinyLD Playground](https://komodojp.github.io/tinyld/)**


![SVG Graph](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcc3c9782-931f-4bcd-b42b-f81538ca1eab_1200x792.svg "SVG Graph")

[source](https://github.com/komodojp/tinyld)

#### **[CopilotKit: ](https://github.com/CopilotKit/CopilotKit)**[Build in-app AI chatbots, and AI-powered Textareas, into react app](https://github.com/CopilotKit/CopilotKit)

CopilotPortal and CopilotTextarea are two open-source tools from Copilot that allow you to build in-app AI chatbots and AI-assisted text generation respectively. CopilotPortal can "see" the current app state and take action inside your app, while CopilotTextarea can autocomplete, edit, and generate text from scratch. Both tools can be used with any LLM (large language model) and can be integrated with your app's backend and 3rd party services.



![CopilotKit, Build in-app AI chatbots, and AI-powered Textareas, into react app](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F35026370-b12c-4bf0-8089-b5be6c15e8f0_3071x799.png)

[source](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file)

#### **[Syntax.js: ](https://github.com/williamtroup/Syntax.js)**[A lightweight JavaScript library for code syntax highlighting!](https://github.com/williamtroup/Syntax.js)

Syntax.js is a lightweight and easy-to-use JavaScript library for code syntax highlighting. It features zero dependencies, supports 22 popular languages, and has a fully styled interface compatible with Bootstrap. It also provides custom triggers, action buttons, copying and printing functionality, and language aliases.

#### **[typehero: ](https://typehero.dev/)**[Connect, collaborate, and grow with a community of TypeScript developers](https://typehero.dev/)

TypeHero is a platform that fosters a vibrant community of TypeScript developers, providing interactive coding challenges, collaborative discussions, and knowledge sharing opportunities to enhance their skills and expertise in TypeScript. With features like Type Challenges, Collaborative Environment, Challenge Creation, and Learning Tracks, TypeHero empowers developers to strengthen their grasp of TypeScript concepts, engage with fellow developers, and continuously elevate their programming abilities.

 
![typehero header](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F994b3042-5bca-4df2-a64e-1aee30d3b4fa_3272x1764.png "typehero header")

  
[source](https://typehero.dev/)

#### **[nvm-desktop: ](https://github.com/1111mp/nvm-desktop)**[Node Version Manager Desktop](https://github.com/1111mp/nvm-desktop)

nvm-desktop is a handy desktop application that simplifies the task of managing multiple Node.js versions. It allows you to easily install, uninstall, and switch between different Node.js versions, streamlining the development process and ensuring compatibility with various projects.

 
![Node Version Manager Desktop](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb6918e4-ae4b-4556-8e67-516da9447fca_2120x1502.png "image")

  

[source](https://github.com/1111mp/nvm-desktop)

#### **[rsbuild: ](https://rsbuild.dev/)**[Unleash the power of Rspack with the out-of-the-box build tool](https://rsbuild.dev/)

Rsbuild is an Rspack-based build tool that provides an out-of-the-box experience, including batteries included, framework agnostic, deep optimization, highly pluggable, easy to configure features.

 

![rsbuild: Unleash the power of Rspack with the out-of-the-box build tool](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbc666b15-c681-4cd8-bcf1-835d9991cf85_2976x1888.png "benchmark")

 

[source](https://rsbuild.dev/)

#### **[vine: ](https://vinejs.dev/docs/introduction)**[VineJS is a form data validation library for Node.js](https://vinejs.dev/docs/introduction)

VineJS is a high-performance form data validation library for Node.js that offers both runtime and static type safety. It's designed for validating HTTP request bodies and form data, providing extensive validation rules, custom error messages, and easy extensibility.

 
![vine: VineJS is a form data validation library for Node.js](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Febc2e480-02b3-4038-86a3-443a302c695a_838x500.png)

 

[source](https://vinejs.dev/docs/introduction)

### More tools to explore:

-   **[vscode-llvm](https://github.com/sunxfancy/vscode-llvm): **VSCode LLVM Compiler Explorer

-   **[llm-viz](https://github.com/bbycroft/llm-viz): **3D Visualization of an GPT-style LLM

-   **[arctic](https://github.com/pilcrowOnPaper/arctic): **OAuth 2.0 clients for popular providers

-   **[github-trends](https://github.com/avgupta456/github-trends): **🚀 Level up your GitHub profile readme with customizable cards including LOC statistics!

-   **[unplugin-turbo-console](https://github.com/unplugin/unplugin-turbo-console): **🚀 Improve the Developer Experience of console.log()

-   **[aws-lite](https://github.com/architect/aws-lite): **A simple, fast, extensible AWS client

-   **[npm-run-all2](https://github.com/bcomnes/npm-run-all2): **A CLI tool to run multiple npm-scripts in parallel or sequential

-   **[quickjs](https://bellard.org/quickjs/): **QuickJS, the Next Generation: a mighty JavaScript engine

-   **[vue-draggable-plus](https://github.com/Alfred-Skyblue/vue-draggable-plus): **Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2

-   **[CASE](https://case.app/): **Typescript lightweight Backend-as-a-Service ✨

-   **[vscode-ui-sketcher](https://github.com/pAIrprogio/vscode-ui-sketcher): **Draw your projects to life

-   **[css-hooks](https://css-hooks.com/): **Hook into advanced CSS features from native inline styles.

-   **[farm](https://github.com/farm-fe/farm): **Extremely fast Vite-compatible web build tool written in Rust

If you like this issue, please consider subscribing to [JSTools Weekly Newsletter](https://jstools.substack.com/). 

Thank you