🔥2023#43: ReactAgent, generate React components from user stories
📅 October 22-28, 2023
The JSTools Weekly Newsletter is back with a new issue, and this week's all about hot JS tools to help you build better web applications. From frameworks and libraries to tools and services:
Frameworks and libraries: ReactAgent, Hwy, Vueform
Tools: gpu_poor, react-magic-motion, openv0, tshy, Revert, Retraced, Shadow Panda, VTable, NopeCHA, Edge Store
Services: Nile, Hextra, Kirimase, Inke, AgencyOS
Subscribe to the JSTools Weekly Newsletter to stay up-to-date on the latest and greatest JS tools.
Happy coding! 🔥
react-agent: The open-source React.js Autonomous LLM Agent
ReactAgent is an experimental tool that can generate React components from user stories. It is built with modern technologies and follows Atomic Design principles.
niledatabase: Serverless Postgres for modern SaaS
Nile is a cloud-based database service that makes it easy to build and scale SaaS applications. It provides a fully managed serverless Postgres database with built-in tenant virtualization, user management, and other SaaS capabilities.
hextra: Modern, batteries-included Hugo theme for creating beautiful doc, blog and static websites
Hextra is a modern static site generator inspired by Nextra and powered by Hugo. It offers a beautiful design, responsive layout, dark mode, fast loading speed, lightweight footprint, full-text search, battery-included features, multi-language support, and SEO readiness.
hwy: Hwy is a simple, lightweight, and flexible web framework, built on Hono and HTMX.
Hwy is a full-stack web framework that uses React-style JSX, Remix-style actions and parallel loaders, and HTMX on the frontend. It has a rich, growing ecosystem with lots of middleware and wonderful docs, and it is 100% server-rendered. Hwy is easy to use, and it can be used to build anything you can do with Hono or HTMX.
gpu_poor: Calculate GPU memory requirement & breakdown for training/inference of LLM models. Supports ggml/bnb quantization
A tool that can be used to calculate the GPU memory and token/s required for training/inference of any LLM model with quantization, inference frameworks, and QLoRA. The purpose of the tool is to help users determine if they can run a particular LLM on their GPU and to figure out the following:
What quantization will fit on their GPU?
Max context length and batch-size their GPU can handle?
Which finetuning method to use (full, LoRA, or QLoRA)?
What is consuming their GPU memory and what to change to fit the LLM on GPU?
How much token/s they can get?
How much total time to finetune?
react-magic-motion: react-magic-motion is a react.js library that magically animates your components.
React-magic-motion is a React library that provides automatic animation for your components. To use it, simply wrap your component in a <MagicMotion /> element.
openv0: AI generated UI components
Openv0 is an open-source, AI-driven generative UI component framework. It allows you to generate and iterate on UI components with live preview, using open source component libraries and icons. Openv0 is highly modular and structured for elaborate generative processes. It is currently supported by React, Next.js, Svelte, NextUI, Flowbite, Shadcn, and Lucide. The latest update makes it easier to integrate new frameworks, libraries, and plugins.
tshy: Hybrid (CommonJS/ESM) TypeScript node package builder.
tshy is a tool that helps you build TypeScript packages that work in both ESM and CommonJS environments. It does this by managing the exports in your package.json file and building your TypeScript program using tsc 5.2, emitting both ESM and CommonJS variants. This allows you to take advantage of the full strength of TypeScript's checking for both output formats.
verto: Your Gateway to Open-Source Collaboration.
Verto.sh is a platform that helps developers find and contribute to open-source projects. It is designed to make it easy for beginners to get started, founders to build teams, and maintainers to find new contributors. Verto.sh is more than just a list of projects - it is a community where developers can collaborate and learn from each other.
kirimase: Build full-stack Next.js apps faster
Kirimase is a command-line tool for building full-stack Next.js apps. It helps you to quickly add and set up essential packages, and scaffold models, views, and controllers directly from the CLI. This can save you a lot of time and effort when starting a new Next.js project.
inke: 📖 A markdown-like web editor with AI-powered.
Inke is a WYSIWYG editor with AI-powered autocompletions, rich editing components, online collaboration, and simple export. It is a Notion-style editor that integrates rich text, Markdown, and JSON. It also offers AI-powered writing tools, such as continuation writing, editing, translation, and chat. Inke allows users to collaborate on documents in real time and export them to PDF, images, Markdown, or JSON files with a single click.
vueform: Open-Source Form Framework for Vue
Vueform is an open-source form framework for Vue.js that provides a comprehensive set of features to make form development easier and more efficient.
A wide range of form elements, including multi-file uploads, date pickers, and rich text editor
Support for element nesting and repeating
A complete theming and templating system with Tailwind support
And many more
revert: Build integrations with any third party API
Revert makes it incredibly easy to build integrations with any third party API such as:
Go-to-market tools like CRMs (Salesforce, Hubspot).
Communication tools (Slack, MS Teams)
Ticketing tools like (Jira, Asana)
retraced: an audit log feature for your application
Retraced is an audit log service that provides a searchable and exportable record of read/write events. It is easy to integrate into your application and is available for Go and Javascript. It is easy to use and meets all of the principles of what makes a good audit log.
shadow-panda: Accessible and customizable components built with Panda CSS & Radix, based on shadcn/ui.
Shadow Panda is a component library built using Radix UI and Panda CSS. It is a tailored version of shadcn/ui, designed specifically for developers who use Panda CSS instead of Tailwind CSS. Shadow Panda includes a preset for Panda CSS that allows developers to use the same components as shadcn/ui, but with Panda CSS styling. The goal of Shadow Panda is to provide developers with a set of accessible and customizable components that they can use to build their own component libraries.
VTable: VTable is a high-performance multidimensional data analysis table and grid artist.
It is based on the visual rendering engine VRender. VTable's core capabilities include extreme performance, multidimensional analysis, and strong expressiveness.
Extreme performance: VTable supports fast computation and rendering of millions of data points.
Multidimensional analysis: VTable automatically analyzes and presents multidimensional data.
Strong expressiveness: VTable provides flexible and powerful graphic capabilities, seamlessly integrating with charts of VChart.
nopecha-nodejs: Automated CAPTCHA solver for Node.js.
The NopeCHA Node.js library is a convenient way to access the NopeCHA API from Node.js applications. It includes a pre-defined set of classes for API resources, which initialize themselves dynamically from API responses. The library is only meant for server-side usage, as using it in client-side browser code will expose your secret API key. The NopeCHA Node.js library supports the following CAPTCHA types: reCAPTCHA v2, reCAPTCHA v3, reCAPTCHA Enterprise, hCaptcha, hCaptcha Enterprise, FunCAPTCHA, AWS WAF CAPTCHA, and Text-based CAPTCHA. Also check out nopecha-extension.
edgestore: File uploads in Next.js just got way easier.
Edge Store is a file storage service that makes it easy to upload and manage files in Next.js. It offers a variety of features, including effortless integration, an easy-to-use dashboard, a fast CDN, large file support, protected files, automatic thumbnail generation, and customizable components.
agency-os: The open source operating system for digital agencies
AgencyOS is a complete website project for agencies to use or build on. It includes a Nuxt 3 website/application and a Directus backend. It also has a variety of features such as a dynamic page builder, blog posts and categories, dynamic form generation, dynamic OG image generation, full SEO support, global search, common utilities, Google Fonts support, ESLint and Prettier pre-configuration, full dark mode support, and theming with an easy config file.
More projects to explore:
penguinFox: 🦊 Firefox with better UI, better privacy and security.
electron-prokit: 🚀 Use electron like a pro!
jazz: Open-source toolkit for sync-based apps.
saas-starter-kit: 🔥 Enterprise SaaS Starter Kit - Kickstart your enterprise app development with the Next.js SaaS boilerplate 🚀
svelte-ux: Collection of Svelte components, actions, stores, and utilities to build highly interactive applications.
prisma-markdown: Markdown generator of Prisma, including ERD and descriptions
firecamp: VS Code for APIs, Open Source Postman/Insomnia Alternative
table-saw: A small web component for responsive <table> elements.
keybr.com: Typing Practice
graysky: a bluesky client
emojisplosion: 💥 Blasts 😄 emoji 😊 like 🎆 fireworks 🎇 all up in your 💻 HTML 📄 page. 😍
proposal-arraybuffer-base64: TC39 proposal for Uint8Array<->base64/hex