diff --git a/README.md b/README.md
index c1eca18..4e7a46b 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,61 @@
-# Isomorpic SVG Charts
+### `isomorphic-svg-charts`
+
+**Installation**:
+```bash
+npm install isomorphic-svg-charts
+```
+
+`isomorphic-svg-charts` is a lightweight, environment-agnostic SVG charting library designed to work seamlessly across any JavaScript environment — from server-side rendering in Node.js to React Server Components and client-side apps. With **zero dependencies** and no reliance on the DOM, this library allows you to generate high-quality SVG charts in environments where typical charting libraries like D3 would be too heavyweight.
+
+This makes it perfect for headless systems, APIs, and server-side applications where you need to render charts without any browser dependencies.
+
+---
+
+### Why Use This Library?
+
+- **Zero dependencies**: Keeps your bundle size small and performance fast.
+- **Doesn't require the DOM**: Works seamlessly in server environments.
+- **Render SVG charts in React Server Components**: Perfect for modern frameworks like Next.js.
+- **Amazing TypeScript Developer Experience**: Full TypeScript support for safe, typed development.
+
+---
+
+### Render Charts In...
+
+- **React / React Native**
+- **Express.js** or any Node.js server (including SSR)
+- **Headless or server-side systems** (e.g., for generating charts for PDFs, emails, or reports)
+- **Any other JavaScript environment**: Whether in the browser or not, this library works everywhere.
+
+
+**Usage Example**:
+
+```javascript
+import { SVGBarChart } from 'isomorphic-svg-charts';
+
+const data = [
+ { name: "A", value: 30 },
+ { name: "B", value: 80 },
+ { name: "C", value: 45 }
+];
+
+const chart = new SVGBarChart({
+ data,
+ apsectRatio: 2,
+ padding: 5
+})
+ .xAxis({
+ height: 5,
+ dataKey: "name",
+ })
+ .yAxis({
+ width: 10,
+ })
+ .cartesianGrid()
+ .bar({ dataKey: "value", fill: "#16ef81" })
+ .toString();
+
+console.log(chart); // Outputs the SVG chart string
+```
+
+**License**: MIT
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index c558db0..6cfd64e 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -1,19 +1,6 @@
import { Callout, Tabs, Tab } from 'nextra-theme-docs'
-## Why Use This Library?
-
-* Zero dependencies
-* Doesn't require the DOM
-* Render SVG charts inside of React Server Components!
-* Amazing TypeScript Developer Experience
-
-## Render chats in...
-
-* React / React Native
-* Express.js
-* Any other JavaScript environment
-
-## Installation
+# Isomorphic SVG Charts
@@ -32,3 +19,27 @@ import { Callout, Tabs, Tab } from 'nextra-theme-docs'
```
+
+
+`isomorphic-svg-charts` is a lightweight, environment-agnostic SVG charting library designed to work seamlessly across any JavaScript environment — from server-side rendering in Node.js to React Server Components and client-side apps. With **zero dependencies** and no reliance on the DOM, this library allows you to generate high-quality SVG charts in environments where typical charting libraries like D3 would be too heavyweight.
+
+This makes it perfect for headless systems, APIs, and server-side applications where you need to render charts without any browser dependencies.
+
+---
+
+### Why Use This Library?
+
+- **Zero dependencies**: Keeps your bundle size small and performance fast.
+- **Doesn't require the DOM**: Works seamlessly in server environments.
+- **Render SVG charts in React Server Components**: Perfect for modern frameworks like Next.js.
+- **Amazing TypeScript Developer Experience**: Full TypeScript support for safe, typed development.
+
+---
+
+### Render Charts In...
+
+- **React / React Native**
+- **Express.js** or any Node.js server (including SSR)
+- **Headless or server-side systems** (e.g., for generating charts for PDFs, emails, or reports)
+- **Any other JavaScript environment**: Whether in the browser or not, this library works everywhere.
+
diff --git a/packages/isomorphic-svg-charts/README.md b/packages/isomorphic-svg-charts/README.md
index 79b988d..711c215 100644
--- a/packages/isomorphic-svg-charts/README.md
+++ b/packages/isomorphic-svg-charts/README.md
@@ -1,206 +1,59 @@
-# Getting Started
-
-So you're like me and you love Server Actions, but you **need more Zod and TypeScript**!
-
-### Why Use This Library?
-
-* Server action validation with [`zod-form-data`](https://www.npmjs.com/package/zod-form-data)
-* Server error handling
-* Amazing TypeScript DX
-* Doesn't break [`useActionState` progressive enhancement](https://react.dev/reference/rsc/server-actions#progressive-enhancement-with-useactionstate)
-* No dependencies other then `zod`/`zod-form-data`
-
-### Why React 19+ is required
-
-This library is designed to enhance `useActionState`, which requires React 19. Without that, you really won't get much benefit from this library.
-
-I have only tested with Next.js for now, but the goal is to make this work with React in general.
-
-### Documentation
-
-See [christianjuth.github.io/better-react-server-actions](https://christianjuth.github.io/better-react-server-actions/).
-
-### Example
-
-#### Login Form Example
-
-* [Try it](https://better-react-server-actions-demo.vercel.app/examples/login-form)
-* [View in docs](https://christianjuth.github.io/better-react-server-actions/examples/login-form)
-
-```js
-"use server";
-
-import { createActionWithState } from 'better-react-server-actions';
-import { zfd } from 'zod-form-data';
-import { z } from 'zod';
-import { redirect } from 'next/navigation';
-
-const EMAIL = 'admin@example.com';
-const PASSWORD = 'password';
-
-export const login = createActionWithState({
- formDataSchema: zfd.formData({
- email: z.string().email(),
- password: zfd.text(),
- }),
- requestHandler: async (prevState, { email, password }) => {
- if (email !== EMAIL || password !== PASSWORD) {
- throw new Error('Invalid email or password');
- }
-
- redirect('/examples/success')
- }
-});
-
+**Installation**:
+```bash
+npm install isomorphic-svg-charts
```
-```jsx
-"use client";
-
-import { useActionState } from 'react';
-import { login } from './action';
-
-export default function Page() {
- const [state, action] = useActionState(login, {});
-
- const formErrors = state.errors?.formErrors;
-
- return (
-
- )
-}
-```
-
-#### Like Button Example
+`isomorphic-svg-charts` is a lightweight, environment-agnostic SVG charting library designed to work seamlessly across any JavaScript environment — from server-side rendering in Node.js to React Server Components and client-side apps. With **zero dependencies** and no reliance on the DOM, this library allows you to generate high-quality SVG charts in environments where typical charting libraries like D3 would be too heavyweight.
-* [Try it](https://better-react-server-actions-demo.vercel.app/examples/like-button)
-* [View in docs](https://christianjuth.github.io/better-react-server-actions/examples/like-button)
+This makes it perfect for headless systems, APIs, and server-side applications where you need to render charts without any browser dependencies.
-```js
-"use server";
-
-import { createActionWithState } from 'better-react-server-actions';
-import { z } from 'zod';
-
-export const login = createActionWithState({
- stateSchema: z.object({
- likeId: z.string().optional(),
- }),
- requestHandler: async ({ likeId }) => {
- // Check if user is logged in
- // and redirect to login page if not
-
- if (likeId) {
- // Delete like via api
- return {
- likeId: undefined,
- }
- } else {
- // Create like via api
- const newLikeId = 'new-like-id';
- return {
- likeId: newLikeId,
- }
- }
- }
-});
-```
+---
-```jsx
-"use client";
-
-import { useActionState } from 'react';
-import { toggleLike } from './action';
-
-export default function Page() {
- const [state, action] = useActionState(toggleLike, {});
-
- return (
-
- )
-}
-```
-
-#### Increment Counter Example
-
-* [Try it](https://better-react-server-actions-demo.vercel.app/examples/increment-counter)
-* [View in docs](https://christianjuth.github.io/better-react-server-actions/examples/increment-counter)
+### Why Use This Library?
-```js
-"use server";
-
-import { createActionWithState } from 'better-react-server-actions';
-import { z } from 'zod';
-
-export const incrementCounter = createActionWithState({
- stateSchema: z.object({
- count: z.number().min(0),
- }),
- requestHandler: async ({ count }) => {
- return {
- count: count + 1,
- }
- }
-});
+- **Zero dependencies**: Keeps your bundle size small and performance fast.
+- **Doesn't require the DOM**: Works seamlessly in server environments.
+- **Render SVG charts in React Server Components**: Perfect for modern frameworks like Next.js.
+- **Amazing TypeScript Developer Experience**: Full TypeScript support for safe, typed development.
+
+---
+
+### Render Charts In...
+
+- **React / React Native**
+- **Express.js** or any Node.js server (including SSR)
+- **Headless or server-side systems** (e.g., for generating charts for PDFs, emails, or reports)
+- **Any other JavaScript environment**: Whether in the browser or not, this library works everywhere.
+
+
+**Usage Example**:
+
+```javascript
+import { SVGBarChart } from 'isomorphic-svg-charts';
+
+const data = [
+ { name: "A", value: 30 },
+ { name: "B", value: 80 },
+ { name: "C", value: 45 }
+];
+
+const chart = new SVGBarChart({
+ data,
+ apsectRatio: 2,
+ padding: 5
+})
+ .xAxis({
+ height: 5,
+ dataKey: "name",
+ })
+ .yAxis({
+ width: 10,
+ })
+ .cartesianGrid()
+ .bar({ dataKey: "value", fill: "#16ef81" })
+ .toString();
+
+console.log(chart); // Outputs the SVG chart string
```
-```jsx
-"use client";
-
-import { useActionState } from 'react';
-import { incrementCounter } from './action';
-
-export default function Page() {
- const [state, action] = useActionState(incrementCounter, {
- count: 0,
- });
-
- return (
-
- )
-}
-```
+**License**: MIT
diff --git a/packages/isomorphic-svg-charts/package.json b/packages/isomorphic-svg-charts/package.json
index 615899c..a1dd2f3 100644
--- a/packages/isomorphic-svg-charts/package.json
+++ b/packages/isomorphic-svg-charts/package.json
@@ -1,7 +1,7 @@
{
"name": "isomorphic-svg-charts",
"version": "0.0.0-alpha1",
- "description": "",
+ "description": "A lightweight, environment-agnostic SVG charting library that works both in the browser and server-side, with no dependencies and no DOM reliance.",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/esm/index.d.ts",
@@ -33,29 +33,22 @@
"devDependencies": {
"nodemon": "^3.1.7",
"typescript": "^5.6.2",
- "vitest": "2.1.1",
- "zod": "^3.23.8",
- "zod-form-data": "^2.0.2"
- },
- "peerDependencies": {
- "zod": ">= 3.11.0",
- "zod-form-data": ">= 2.0.0"
+ "vitest": "2.1.1"
},
"keywords": [
- "react",
- "next",
- "nextjs",
- "rsc",
- "react server components",
- "action",
- "actions",
- "react actions",
- "next actions",
- "server actions",
- "zod",
- "zod-form-data",
- "validation",
- "typescript",
- "progressive enhancement"
+ "svg",
+ "charts",
+ "charting",
+ "isomorphic",
+ "node",
+ "browser",
+ "server-side",
+ "lightweight",
+ "environment-agnostic",
+ "data-visualization",
+ "minimal",
+ "bar-chart",
+ "line-chart",
+ "area-chart"
]
}
diff --git a/yarn.lock b/yarn.lock
index 0ba7b89..989312f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5076,11 +5076,6 @@ __metadata:
nodemon: "npm:^3.1.7"
typescript: "npm:^5.6.2"
vitest: "npm:2.1.1"
- zod: "npm:^3.23.8"
- zod-form-data: "npm:^2.0.2"
- peerDependencies:
- zod: ">= 3.11.0"
- zod-form-data: ">= 2.0.0"
languageName: unknown
linkType: soft