update docs

Author: junzyx

apps/docs/cli.mdx

@@ -6,34 +6,78 @@ description: "After installing the htmldocs package, you can start using the com
 icon: "square-terminal"
 ---
 
-## Installation
+## `init`
 
-To install the htmldocs CLI globally, run the following command:
+Initializes a new htmldocs project in the current directory.
 
-```bash
-npm i -g htmldocs@latest
+<CodeGroup>
+```bash npm
+npx htmldocs@latest init
 ```
 
-After installation, you can use the `htmldocs` command from anywhere in your terminal.
+```bash pnpm
+pnpx htmldocs@latest init
+```
 
-## `htmldocs init`
+```bash yarn
+yarn dlx htmldocs@latest init
+```
 
-Initializes a new htmldocs project in the current directory.
+```bash bun
+bunx htmldocs@latest init
+```
+</CodeGroup>
 
 {/* **Options**
 
 <ResponseField name="--template" type="string" default="default">
   Specify a template to use for the new project. Available templates: default, minimal, advanced.
 </ResponseField> */}
 
-## `htmldocs login`
+## `login`
 
 Authenticates the CLI with the cloud. This allows you to publish your documents to the cloud.
 
-## `htmldocs dev`
+<CodeGroup>
+```bash npm
+npx htmldocs@latest login
+```
+
+```bash pnpm
+pnpx htmldocs@latest login
+```
+
+```bash yarn
+yarn dlx htmldocs@latest login
+```
+
+```bash bun
+bunx htmldocs@latest login
+```
+</CodeGroup>
+
+## `dev`
 
 Starts a local development server that will watch your files and automatically rebuild your document template when you make changes. Login not required.
 
+<CodeGroup>
+```bash npm
+npx htmldocs@latest dev
+```
+
+```bash pnpm
+pnpx htmldocs@latest dev
+```
+
+```bash yarn
+yarn dlx htmldocs@latest dev
+```
+
+```bash bun
+bunx htmldocs@latest dev
+```
+</CodeGroup>
+
 **Options**
 
 <ResponseField name="--dir" type="string" default="./documents">
@@ -43,22 +87,58 @@ Starts a local development server that will watch your files and automatically r
   Port to run dev server on
 </ResponseField>
 
-## `htmldocs publish <file>`
+## `publish <file>`
 
-Publishes the document to the cloud for API use. Must be [authenticated](/cli#htmldocs-login).
+Publishes the document to the cloud for API use. Must be [authenticated](/cli#login).
 
 <Warning>Be sure to run this from the root of your project.</Warning>
 
+<CodeGroup>
+```bash npm
+npx htmldocs@latest publish <file>
+```
+
+```bash pnpm
+pnpx htmldocs@latest publish <file>
+```
+
+```bash yarn
+yarn dlx htmldocs@latest publish <file>
+```
+
+```bash bun
+bunx htmldocs@latest publish <file>
+```
+</CodeGroup>
+
 **Options**
 
 <ResponseField name="file" type="string" required>
   The file path of the document to publish.
 </ResponseField>
 
-## `htmldocs --help`
+## `--help`
 
 Shows all available commands and options.
 
+<CodeGroup>
+```bash npm
+npx htmldocs@latest --help
+```
+
+```bash pnpm
+pnpx htmldocs@latest --help
+```
+
+```bash yarn
+yarn dlx htmldocs@latest --help
+```
+
+```bash bun
+bunx htmldocs@latest --help
+```
+</CodeGroup>
+
 **Options**
 
 <ResponseField name="-v, --verbose" type="boolean">

apps/docs/introduction.mdx

@@ -6,37 +6,51 @@ icon: "hand-wave"
 
 ![htmldocs editor](/images/editor.png)
 
-htmldocs is a modern typesetting toolkit that lets you build document templates using React and JSX - the same way you build web applications. Create reusable components, use props for dynamic content, and leverage the entire JavaScript ecosystem:
+PDF document creation is stuck in the past, from clunky Word docs to complex LaTeX to outdated tools. htmldocs brings document generation into 2025 with a modern developer experience using **React**, **TypeScript**, and **Tailwind**.
 
-```jsx
-function Invoice({ customer, items, total }) {
-  return (
-    <Document size="A4" orientation="portrait" margin="0.75in">
-      <Footer position="bottom-center">
-        Page {currentPage}
-      </Footer>
+## Key Features
 
-      <Page style={{ padding: '1rem' }}>
-        <h1>Invoice for {customer.name}</h1>
-        {items.map(item => (
-          <LineItem {...item} />
-        ))}
-        <Total amount={total} />
-      </Page>
-    </Document>
-  );
-}
-```
+- 📌 Support for the latest CSS features like margin boxes and flexbox
+- 🧩 Collection of unstyled components for document layout
+- 📄 JSX templating system for building dynamic documents
+- 🔗 Full TypeScript support for type safety
+- ⚡ Dynamic data integration through props and APIs
+- 📊 Real-time preview server with hot reloading
+
+## Example
+
+To see htmldocs in action, here's a simple example of a dynamic invoice template:
 
-With htmldocs, you can:
+![Invoice template with htmldocs](https://github.com/user-attachments/assets/40e4ec91-e5eb-483a-ba28-14c6fd57ad8b)
 
-- Build document templates using **React components** and **JSX syntax**
-- Use your favorite JavaScript libraries - from date formatting to charting
-- Style documents with modern CSS and frameworks like **Tailwind**
-- Generate professional-quality PDFs at scale with precise typesetting
-- Preview changes in real-time with hot-reloading as you develop
-- Share components and styles across your documents for consistent branding
-- Version control your templates just like you do with code
+Creating multiple invoices is as simple as passing different customer information through props. Here's how you can generate a new invoice by updating the customer details:
+
+```tsx
+<Invoice 
+  customer={{
+    name: "John Doe",
+    address: "456 Main St",
+    city: "Anytown",
+    state: "CA",
+    zip: "12345",
+    phone: "123-456-7890",
+  }}
+  items={[
+    {
+      name: "Website Development",
+      description: "Frontend implementation with React",
+      price: 2000.00,
+      quantity: 1
+    },
+    {
+      name: "UI/UX Design",
+      description: "Custom design system creation",
+      price: 1500.00,
+      quantity: 1
+    }
+  ]}
+/>
+```
 
 <CardGroup cols={2}>
   <Card

apps/docs/usage/publishing-to-the-cloud.mdx

@@ -6,12 +6,6 @@ icon: "cloud-arrow-up"
 
 ## Prerequisites
 
-First, ensure you have the latest version of the htmldocs CLI installed:
-
-```bash
-npm i -g htmldocs@latest
-```
-
 This command installs or updates the CLI globally on your system.
 
 If you haven't already, run the following command to create a new htmldocs project:
@@ -20,14 +14,12 @@ If you haven't already, run the following command to create a new htmldocs proje
 npx htmldocs@latest init
 ```
 
-
-
 ## Authentication
 
 Before publishing, you'll need to authenticate with the htmldocs cloud platform:
 
 ```bash
-htmldocs login
+npx htmldocs@latest login
 ```
 
 This command will open a browser window where you can:
@@ -42,7 +34,7 @@ Once authenticated, you can publish your document templates using the `publish`
 <Warning>Be sure to run this from the root of your project.</Warning>
 
 ```bash
-htmldocs publish ./documents/templates/Invoice.tsx
+npx htmldocs@latest publish ./documents/templates/Invoice.tsx
 ```
 
 
@@ -75,26 +67,48 @@ API keys are scoped to your team and provide access only to documents owned by t
 To generate a document, send a POST request to the generation endpoint with your document variables:
 
 ```bash
-curl -X POST https://api.htmldocs.com/api/documents/{documentId} \
+curl -X POST https://api.htmldocs.com/api/documents/invoice \
   -H "Authorization: Bearer YOUR_API_KEY" \
   -H "Content-Type: application/json" \
   -d '{
-    "format": "json",
+    "format": "pdf",
     "props": {
-      "customerName": "Acme Corp",
-      "items": [
+      "billedTo": {
+        "name": "Josiah Zhang",
+        "address": "123 Elm Street",
+        "city": "Anytown",
+        "state": "CA",
+        "zip": "12345",
+        "phone": "123-456-7890"
+      },
+      "yourCompany": {
+        "name": "Your Company",
+        "address": "456 Banana Rd.",
+        "city": "San Francisco",
+        "state": "CA",
+        "zip": "94107",
+        "taxId": "00XXXXX1234X0XX",
+        "phone": "123-456-7890",
+        "email": "hello@email.com"
+      },
+      "services": [
         {
-          "name": "Premium License",
+          "name": "Design",
+          "description": "Website redesign and branding",
           "quantity": 1,
-          "price": 999.00
+          "rate": 1000
+        },
+        {
+          "name": "Consulting",
+          "description": "Technical architecture review",
+          "quantity": 2,
+          "rate": 1200
         }
       ]
     }
   }'
 ```
 
-Replace `{documentId}` with your template's document ID (e.g., "invoice").
-
 ## Managing Published Templates
 
 You can view and manage your published templates in the [Dashboard](https://htmldocs.com/dashboard), where you can:

packages/htmldocs/src/app/components/sidebar/sidebar-directory-children.tsx

@@ -37,7 +37,7 @@ export const SidebarDirectoryChildren = (props: {
             initial={{ opacity: 0, height: 0 }}
           >
             {props.isRoot ? null : (
-              <div className="line absolute left-2.5 w-px h-full bg-slate-6" />
+              <div className="line absolute left-2.5 w-px h-full bg-border -z-20" />
             )}
 
             <div className="data-[root=true]:py-2 flex flex-col truncate">
@@ -107,7 +107,7 @@ export const SidebarDirectoryChildren = (props: {
                               initial={{ opacity: 0 }}
                             >
                               {!props.isRoot && (
-                                <div className="rounded-md bg-emerald-400/20 w-px absolute top-1 left-1.5 h-6" />
+                                <div className="rounded-md bg-emerald-400/80 w-px absolute top-1 left-1.5 h-6" />
                               )}
                             </motion.span>
                           ) : null}

packages/htmldocs/src/app/preview/[...slug]/loading.tsx

@@ -8,7 +8,7 @@ export default function Loading() {
   return (
     <Shell pathSeparator={path.sep}>
       <div className="flex items-center justify-center h-[calc(100vh_-_70px)]">
-        <Spinner className="h-6 w-6 text-slate-700 animate-spin" />
+        <Spinner className="h-6 w-6 text-muted-foreground animate-spin" />
       </div>
     </Shell>
   );