Skip to content

Commit b568042

Browse files
junzyxjunzyx
committed
update docs
1 parent c6753c4 commit b568042

File tree

5 files changed

+167
-59
lines changed

5 files changed

+167
-59
lines changed

‎apps/docs/cli.mdx

Lines changed: 92 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,78 @@ description: "After installing the htmldocs package, you can start using the com
66
icon: "square-terminal"
77
---
88

9-
## Installation
9+
## `init`
1010

11-
To install the htmldocs CLI globally, run the following command:
11+
Initializes a new htmldocs project in the current directory.
1212

13-
```bash
14-
npm i -g htmldocs@latest
13+
<CodeGroup>
14+
```bash npm
15+
npx htmldocs@latest init
1516
```
1617

17-
After installation, you can use the `htmldocs` command from anywhere in your terminal.
18+
```bash pnpm
19+
pnpx htmldocs@latest init
20+
```
1821

19-
## `htmldocs init`
22+
```bash yarn
23+
yarn dlx htmldocs@latest init
24+
```
2025

21-
Initializes a new htmldocs project in the current directory.
26+
```bash bun
27+
bunx htmldocs@latest init
28+
```
29+
</CodeGroup>
2230

2331
{/* **Options**
2432
2533
<ResponseField name="--template" type="string" default="default">
2634
Specify a template to use for the new project. Available templates: default, minimal, advanced.
2735
</ResponseField> */}
2836

29-
## `htmldocs login`
37+
## `login`
3038

3139
Authenticates the CLI with the cloud. This allows you to publish your documents to the cloud.
3240

33-
## `htmldocs dev`
41+
<CodeGroup>
42+
```bash npm
43+
npx htmldocs@latest login
44+
```
45+
46+
```bash pnpm
47+
pnpx htmldocs@latest login
48+
```
49+
50+
```bash yarn
51+
yarn dlx htmldocs@latest login
52+
```
53+
54+
```bash bun
55+
bunx htmldocs@latest login
56+
```
57+
</CodeGroup>
58+
59+
## `dev`
3460

3561
Starts a local development server that will watch your files and automatically rebuild your document template when you make changes. Login not required.
3662

63+
<CodeGroup>
64+
```bash npm
65+
npx htmldocs@latest dev
66+
```
67+
68+
```bash pnpm
69+
pnpx htmldocs@latest dev
70+
```
71+
72+
```bash yarn
73+
yarn dlx htmldocs@latest dev
74+
```
75+
76+
```bash bun
77+
bunx htmldocs@latest dev
78+
```
79+
</CodeGroup>
80+
3781
**Options**
3882

3983
<ResponseField name="--dir" type="string" default="./documents">
@@ -43,22 +87,58 @@ Starts a local development server that will watch your files and automatically r
4387
Port to run dev server on
4488
</ResponseField>
4589

46-
## `htmldocs publish <file>`
90+
## `publish <file>`
4791

48-
Publishes the document to the cloud for API use. Must be [authenticated](/cli#htmldocs-login).
92+
Publishes the document to the cloud for API use. Must be [authenticated](/cli#login).
4993

5094
<Warning>Be sure to run this from the root of your project.</Warning>
5195

96+
<CodeGroup>
97+
```bash npm
98+
npx htmldocs@latest publish <file>
99+
```
100+
101+
```bash pnpm
102+
pnpx htmldocs@latest publish <file>
103+
```
104+
105+
```bash yarn
106+
yarn dlx htmldocs@latest publish <file>
107+
```
108+
109+
```bash bun
110+
bunx htmldocs@latest publish <file>
111+
```
112+
</CodeGroup>
113+
52114
**Options**
53115

54116
<ResponseField name="file" type="string" required>
55117
The file path of the document to publish.
56118
</ResponseField>
57119

58-
## `htmldocs --help`
120+
## `--help`
59121

60122
Shows all available commands and options.
61123

124+
<CodeGroup>
125+
```bash npm
126+
npx htmldocs@latest --help
127+
```
128+
129+
```bash pnpm
130+
pnpx htmldocs@latest --help
131+
```
132+
133+
```bash yarn
134+
yarn dlx htmldocs@latest --help
135+
```
136+
137+
```bash bun
138+
bunx htmldocs@latest --help
139+
```
140+
</CodeGroup>
141+
62142
**Options**
63143

64144
<ResponseField name="-v, --verbose" type="boolean">

‎apps/docs/introduction.mdx

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,51 @@ icon: "hand-wave"
66

77
![htmldocs editor](/images/editor.png)
88

9-
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:
9+
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**.
1010

11-
```jsx
12-
function Invoice({ customer, items, total }) {
13-
return (
14-
<Document size="A4" orientation="portrait" margin="0.75in">
15-
<Footer position="bottom-center">
16-
Page {currentPage}
17-
</Footer>
11+
## Key Features
1812

19-
<Page style={{ padding: '1rem' }}>
20-
<h1>Invoice for {customer.name}</h1>
21-
{items.map(item => (
22-
<LineItem {...item} />
23-
))}
24-
<Total amount={total} />
25-
</Page>
26-
</Document>
27-
);
28-
}
29-
```
13+
- 📌 Support for the latest CSS features like margin boxes and flexbox
14+
- 🧩 Collection of unstyled components for document layout
15+
- 📄 JSX templating system for building dynamic documents
16+
- 🔗 Full TypeScript support for type safety
17+
- ⚡ Dynamic data integration through props and APIs
18+
- 📊 Real-time preview server with hot reloading
19+
20+
## Example
21+
22+
To see htmldocs in action, here's a simple example of a dynamic invoice template:
3023

31-
With htmldocs, you can:
24+
![Invoice template with htmldocs](https://github.com/user-attachments/assets/40e4ec91-e5eb-483a-ba28-14c6fd57ad8b)
3225

33-
- Build document templates using **React components** and **JSX syntax**
34-
- Use your favorite JavaScript libraries - from date formatting to charting
35-
- Style documents with modern CSS and frameworks like **Tailwind**
36-
- Generate professional-quality PDFs at scale with precise typesetting
37-
- Preview changes in real-time with hot-reloading as you develop
38-
- Share components and styles across your documents for consistent branding
39-
- Version control your templates just like you do with code
26+
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:
27+
28+
```tsx
29+
<Invoice
30+
customer={{
31+
name: "John Doe",
32+
address: "456 Main St",
33+
city: "Anytown",
34+
state: "CA",
35+
zip: "12345",
36+
phone: "123-456-7890",
37+
}}
38+
items={[
39+
{
40+
name: "Website Development",
41+
description: "Frontend implementation with React",
42+
price: 2000.00,
43+
quantity: 1
44+
},
45+
{
46+
name: "UI/UX Design",
47+
description: "Custom design system creation",
48+
price: 1500.00,
49+
quantity: 1
50+
}
51+
]}
52+
/>
53+
```
4054

4155
<CardGroup cols={2}>
4256
<Card

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

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,6 @@ icon: "cloud-arrow-up"
66

77
## Prerequisites
88

9-
First, ensure you have the latest version of the htmldocs CLI installed:
10-
11-
```bash
12-
npm i -g htmldocs@latest
13-
```
14-
159
This command installs or updates the CLI globally on your system.
1610

1711
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
2014
npx htmldocs@latest init
2115
```
2216

23-
24-
2517
## Authentication
2618

2719
Before publishing, you'll need to authenticate with the htmldocs cloud platform:
2820

2921
```bash
30-
htmldocs login
22+
npx htmldocs@latest login
3123
```
3224

3325
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`
4234
<Warning>Be sure to run this from the root of your project.</Warning>
4335

4436
```bash
45-
htmldocs publish ./documents/templates/Invoice.tsx
37+
npx htmldocs@latest publish ./documents/templates/Invoice.tsx
4638
```
4739

4840

@@ -75,26 +67,48 @@ API keys are scoped to your team and provide access only to documents owned by t
7567
To generate a document, send a POST request to the generation endpoint with your document variables:
7668

7769
```bash
78-
curl -X POST https://api.htmldocs.com/api/documents/{documentId} \
70+
curl -X POST https://api.htmldocs.com/api/documents/invoice \
7971
-H "Authorization: Bearer YOUR_API_KEY" \
8072
-H "Content-Type: application/json" \
8173
-d '{
8274
"format": "json",
8375
"props": {
84-
"customerName": "Acme Corp",
85-
"items": [
76+
"billedTo": {
77+
"name": "Josiah Zhang",
78+
"address": "123 Elm Street",
79+
"city": "Anytown",
80+
"state": "CA",
81+
"zip": "12345",
82+
"phone": "123-456-7890"
83+
},
84+
"yourCompany": {
85+
"name": "Your Company",
86+
"address": "456 Banana Rd.",
87+
"city": "San Francisco",
88+
"state": "CA",
89+
"zip": "94107",
90+
"taxId": "00XXXXX1234X0XX",
91+
"phone": "123-456-7890",
92+
"email": "hello@email.com"
93+
},
94+
"services": [
8695
{
87-
"name": "Premium License",
96+
"name": "Design",
97+
"description": "Website redesign and branding",
8898
"quantity": 1,
89-
"price": 999.00
99+
"rate": 1000
100+
},
101+
{
102+
"name": "Consulting",
103+
"description": "Technical architecture review",
104+
"quantity": 2,
105+
"rate": 1200
90106
}
91107
]
92108
}
93109
}'
94110
```
95111

96-
Replace `{documentId}` with your template's document ID (e.g., "invoice").
97-
98112
## Managing Published Templates
99113

100114
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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const SidebarDirectoryChildren = (props: {
3737
initial={{ opacity: 0, height: 0 }}
3838
>
3939
{props.isRoot ? null : (
40-
<div className="line absolute left-2.5 w-px h-full bg-slate-6" />
40+
<div className="line absolute left-2.5 w-px h-full bg-border -z-20" />
4141
)}
4242

4343
<div className="data-[root=true]:py-2 flex flex-col truncate">
@@ -107,7 +107,7 @@ export const SidebarDirectoryChildren = (props: {
107107
initial={{ opacity: 0 }}
108108
>
109109
{!props.isRoot && (
110-
<div className="rounded-md bg-emerald-400/20 w-px absolute top-1 left-1.5 h-6" />
110+
<div className="rounded-md bg-emerald-400/80 w-px absolute top-1 left-1.5 h-6" />
111111
)}
112112
</motion.span>
113113
) : null}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function Loading() {
88
return (
99
<Shell pathSeparator={path.sep}>
1010
<div className="flex items-center justify-center h-[calc(100vh_-_70px)]">
11-
<Spinner className="h-6 w-6 text-slate-700 animate-spin" />
11+
<Spinner className="h-6 w-6 text-muted-foreground animate-spin" />
1212
</div>
1313
</Shell>
1414
);

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy