diff --git a/README.md b/README.md
index e367455..67515fb 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,8 @@
Forge is a typed, local, variant-driven way to organize CSS and create
self-contained TSX components out of discrete parts.
+Works with **React**, **Preact**, and **Hono JSX**.
+
## css problems
- Styles are global and open - anything can override anything anywhere.
@@ -28,6 +30,42 @@ self-contained TSX components out of discrete parts.
- Themes are easy.
- Errors and feedback are provided.
+## setup
+
+Install forge and configure your JSX runtime:
+
+```bash
+npm install @because/forge
+```
+
+Then set `jsxImportSource` in your `tsconfig.json`:
+
+```json
+// React
+{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "react" } }
+
+// Preact
+{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" } }
+
+// Hono
+{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "hono/jsx" } }
+```
+
+Include the generated CSS in your app:
+
+```tsx
+// SSR - render in your
+import { Styles } from "@because/forge"
+
+
+
+
+
+// Or get raw CSS string
+import { stylesToCSS } from "@because/forge"
+const css = stylesToCSS()
+```
+
## examples
### styles
diff --git a/examples/landing.tsx b/examples/landing.tsx
index 7f54513..530ab03 100644
--- a/examples/landing.tsx
+++ b/examples/landing.tsx
@@ -319,6 +319,44 @@ const MARKDOWN_CONTENT = `
Forge is a typed, local, variant-driven way to organize CSS and create
self-contained TSX components out of discrete parts.
+Works with **React**, **Preact**, and **Hono JSX**.
+
+## setup
+
+Install forge and configure your JSX runtime:
+
+\`\`\`bash
+npm install @because/forge
+\`\`\`
+
+Then set \`jsxImportSource\` in your \`tsconfig.json\`:
+
+\`\`\`tsx
+// React
+{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "react" } }
+
+// Preact
+{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" } }
+
+// Hono
+{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "hono/jsx" } }
+\`\`\`
+
+Include the generated CSS in your app:
+
+\`\`\`tsx
+// SSR - render in your
+import { Styles } from "@because/forge"
+
+
+
+
+
+// Or get raw CSS string
+import { stylesToCSS } from "@because/forge"
+const css = stylesToCSS()
+\`\`\`
+
## css problems
- Styles are global and open - anything can override anything anywhere.
diff --git a/package.json b/package.json
index 1501aa0..0becf77 100644
--- a/package.json
+++ b/package.json
@@ -30,5 +30,16 @@
},
"peerDependencies": {
"typescript": "^5"
+ },
+ "peerDependenciesMeta": {
+ "react": {
+ "optional": true
+ },
+ "preact": {
+ "optional": true
+ },
+ "hono": {
+ "optional": true
+ }
}
}
diff --git a/src/tests/test_helpers.ts b/src/tests/test_helpers.ts
index d615394..0bf84f9 100644
--- a/src/tests/test_helpers.ts
+++ b/src/tests/test_helpers.ts
@@ -1,13 +1,13 @@
-import { define } from '../index'
+import { stylesToCSS } from '../index'
+// Uses Hono JSX's toString() for tests - framework-specific
export function renderToString(jsx: any): string {
return jsx.toString()
}
+// Get generated CSS directly from styles registry
export function getStylesCSS(): string {
- const StylesComponent = define.Styles
- const result = StylesComponent() as any
- return result.props.dangerouslySetInnerHTML.__html as string
+ return stylesToCSS()
}
export function parseCSS(css: string): Record> {
diff --git a/tsconfig.json b/tsconfig.json
index 16bb5e0..e0b34b4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
"module": "Preserve",
"moduleDetection": "force",
"jsx": "react-jsx",
+ // Hono for development - consumers override with their JSX runtime (react, preact, etc.)
"jsxImportSource": "hono/jsx",
"allowJs": true,