roarlyte
Joined 1 year ago
Joined 1 year ago
Wanted to share a super cool project (IMO) we have been working on. It’s a zero-dependency React data grid, called LyteNyte Grid. Check it out, and hopefully, you will find it useful and save yourself a ton of time.
Some of the reasons to use LyteNyte Grid:
Crazy Performance: LyteNyte Grid is super light at only 40kb (gzipped) and is extremely fast. It can handle millions of rows and 10,000+ updates/sec. Based on our internal benchmarks, it is one of the fastest grids available on the market.
Feature-rich: Brings 150+ features, most of which are free and open source. Features such as cell range selection, row master-detail, and row grouping are included for free with LyteNyte Grid. This is something we are quite proud of. There are paid libraries (I won't name them) that offer less.
No Styling Tradeoffs: With LyteNyte Grid, you can choose whether to go headless or styled. There is basically no tradeoff when considering styling choices.
Full Prop Driven: You can configure it declaratively from your state, whether it’s URL params, server state, Redux, or whatever else you can imagine, meaning zero sync headaches.
Unique DX Experience: Our grid is built in React for React and has a clean declarative API, which eliminates awkward configuration workarounds.
We also recently dropped LyteNyte Grid AI Skills. This is a really nice feature if you’re using AI coding agents. It lets you describe an advanced data grid solution, and your AI agent codes it for you. We have been testing this with increasingly complex grid instances, and the results have been awesome.
All our code is publicly available on GitHub. Happy to answer any questions you may have.
If you find this helpful and like what we’re building, GitHub stars help. Feature suggestions and code contributions are always welcome.
If you’ve ever tried to save time by using AI to wire up your data grid, you’ve likely run into challenges when things got complex. The reason is that grid libraries often come with opinionated interfaces, imperative APIs, and layers of mapping code that AI agents tend to struggle with.
LyteNyte Grid 2.1 is our first step toward solving that.
v2.1 ships AI Skills, giving your AI agent curated knowledge of LyteNyte Grid, so it can generate advanced grid implementations more accurately and consistently.
Instead of wiring the grid manually, just describe the result and let your agent handle the rest. The idea is not “AI magically builds your app.” Cause it won’t. But with Skills, you can go from idea to a production-ready data grid in minutes.
LyteNyte Grid works particularly well with Skills, thanks to its stateless architecture, making it exceptionally effective for AI applications.
- AI understands React, and LyteNyte Grid is built in React for React (no wrappers). - Our grid is declarative and fully prop-driven, so AI agents don’t need mapping or translation code. - It uses familiar React patterns, so simpler prompts yield more accurate results. - Accessibility is built directly into the grid, so no hallucinating custom screen-reader properties.
If you’ve ever tried to save time by using AI to wire up your data grid, you’ve likely run into challenges when things got complex. The reason is that grid libraries often come with opinionated interfaces, imperative APIs, and layers of mapping code that AI agents tend to struggle with.
LyteNyte Grid 2.1 is our first step toward solving that.
v2.1 ships AI Skills, giving your AI agent curated knowledge of LyteNyte Grid, so it can generate advanced grid implementations more accurately and consistently.
Instead of wiring the grid manually, just describe the result and let your agent handle the rest. The idea is not “AI magically builds your app.” Cause it won’t. But with Skills, you can go from idea to a production-ready data grid in minutes.
LyteNyte Grid works particularly well with Skills, thanks to its stateless architecture, making it exceptionally effective for AI applications.
AI understands React, and LyteNyte Grid is built in React for React (no wrappers). Our grid is declarative and fully prop-driven, so AI agents don’t need mapping or translation code. It uses familiar React patterns, so simpler prompts yield more accurate results. Accessibility is built directly into the grid, so no hallucinating custom screen-reader properties.
Skills work with any coding agent that supports the Vercel Skills CLI, and is available for both Core (open-source) and Pro users.
Install with: `npx skills add 1771-Technologies/lytenyte`
In v2.1, we have also moved clipboard support and cell range selection into our free, open-source Core package. This shift aligns with our vision of being the most feature-rich open-source React data grid.
v.2.1 brings more PRO features as well: Expression Input Component. Expression Engine. Advanced Expression Filter. Expression Plugins for custom functions.
We have been at this for 2 years now, and all our code is publicly available on GitHub. If you find this helpful and like what we’re building, GitHub stars help. Feature suggestions and code contributions are always welcome.
The main problem with every React data grid available is that it requires developers to write code using the dreaded `useEffect` or similar effect handlers, primarily when syncing state with URL params.
LyteNyte Grid v.1 was less opinionated than other data grid libraries, but still enforced opinionated structures for sort, filter, and group models, creating friction if your data source didn’t fit our mold.
These problems aren’t unique to us. Every data grid hits this wall. Until today! We are proud to announce the official launch of LyteNyte Grid v.2.
LyteNyte Grid v.2 has gone 100% stateless and fully prop-driven. Meaning you can configure it declaratively from your state, whether it’s URL params, server state, Redux, or whatever else you can imagine. Effectively you never have to deal with synchronization headaches ever again.
Our 2.0 release also brings a smaller ~30kb gzipped bundle size, Hybrid Headless mode for faster setup, and native object-based Tree Data. In addition, our new API offers virtually unlimited extensibility.
We wrote 130+ in-depth guides, each with thorough explanations, real-world demos, and code examples. Everything you need to get going with LyteNyte Grid 2.0. fast.
Shadcn/ui is a collection of modern, accessible React components that you can drop into your codebase or generate via a CLI. Unlike traditional UI libraries, shadcn/ui gives you complete control over your code: every component is easy to customize and fit with your own styles, so you never have to compromise on your design.
At 1771 Technologies, we’ve been hard at work crafting something special for the React and shadcn/ui communities. We’re excited to announce that LyteNyte Grid, our high-performance React data grid, is now live in the shadcn/ui registry.
So, if feature-rich data tables and seamless shadcn/ui integration get you excited, you’re at the right place.
Setup LyteNyte + Shadcn/ui in 60s
LyteNyte Grid is a powerful React grid library built for massive scale, full Tailwind compatibility, and maximum flexibility. It’s the only grid that can be headless for full control or pre-styled with one of our sleek themes.
We've now added native themes for shadcn/ui (dark and light), using shadcn's own Tailwind token system. For developers, that means:
■ No extra styling layers to manage. ■ If you update your theme tokens, the grid updates automatically. ■ It looks and feels like a natural extension of your shadcn/ui application.
You can install it using the standard shadcn/ui command and get up and running in seconds.
Bringing Shadcn/ui to All LyteNyte Grid Users
The new Shadcn themes are part of our open-source LyteNyte Grid Core edition, which, at only 36kb (gzipped), already offers powerful features for free, such as: ■ Row grouping ■ Master-detail rows ■ Data aggregation
So, if you're building dashboards, admin panels, or internal tools and want them to feel native to shadcn/ui, LyteNyte Grid handles the heavy lifting so you can focus on features, not plumbing.