Skip to content

Commit 22c711e

Browse files
junzyxjunzyx
committed
update readme
1 parent 0f6bffd commit 22c711e

File tree

2 files changed

+65
-65
lines changed

2 files changed

+65
-65
lines changed

Diff for: ‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 htmldocs
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

Diff for: ‎README.md

+44-65
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,56 @@
1-
![htmldocs](https://github.com/user-attachments/assets/6f8e8ef2-022d-4418-8e86-c9663587f92f)
1+
<h1 align="center">
2+
<img src="https://github.com/user-attachments/assets/655fa7f9-98e7-42ee-8cd0-bb9193f100e9" alt="htmldocs" width="100%" />
3+
</h1>
24

3-
<div align="center"><strong>htmldocs</strong></div>
4-
<div align="center">Build beautiful, reactive documents with modern web technologies <br /> and generate them at scale. Batteries included.</div>
5-
<br />
65
<div align="center">
7-
<a href="https://htmldocs.com">Website</a>
8-
<span> · </span>
9-
<a href="https://github.com/htmldocs-js/htmldocs">GitHub</a>
10-
<span> · </span>
11-
<a href="https://join.slack.com/t/htmldocs/shared_invite/zt-29hw1bnmu-ShX6Jo1KNc_XeF~gFQJH_Q">Slack</a>
6+
<p align="center">
7+
<a href="https://docs.htmldocs.com">
8+
<img alt="Documentation" src="https://img.shields.io/website?down_message=offline&label=docs&up_color=007aff&up_message=online&url=https%3A%2F%2Fdocs.htmldocs.com"
9+
></a> <a href="https://htmldocs.com"><img src="https://img.shields.io/website?label=htmldocs.com&up_message=online&url=https%3A%2F%2Fhtmldocs.com" alt="Website"></a> <a href="https://www.npmjs.com/package/htmldocs"><img src="https://img.shields.io/npm/v/htmldocs?style=flat" alt="NPM version"></a> <a href="https://github.com/htmldocs-js/htmldocs/blob/main/LICENSE"><img src="https://img.shields.io/github/license/htmldocs-js/htmldocs" alt="License"></a> <a href="https://join.slack.com/t/htmldocs/shared_invite/zt-29hw1bnmu-ShX6Jo1KNc_XeF~gFQJH_Q"><img src="https://img.shields.io/badge/chat-on%20slack-4a154b?logo=slack" alt="Slack"></a> </p>
1210
</div>
1311
14-
## Introduction
15-
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 the tools you already love: <b>React</b>, <b>TypeScript</b>, and <b>Tailwind</b>.
12+
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 the tools you already love: **React**, **TypeScript**, and **Tailwind**.
1613

17-
## Why
14+
## 🚀 What is htmldocs?
1815

19-
htmldocs is a modern toolkit for building documents with the web:
16+
htmldocs is a local document editor and preview server to help you _create_ PDFs with React. It provides all the structural benefits of LaTeX with the familiarity of HTML and CSS. With htmldocs, you can use JSX to build document templates (invoices, reports, contracts, etc.) and generate PDFs just by passing data as props. htmldocs has:
2017

21-
- **Styling**: Use modern CSS properties to create visually stunning documents with web-like flexibility.
18+
- 📌 Support for the latest CSS features like margin boxes and flexbox
19+
- 🧩 A collection of unstyled components to help you layout your documents
20+
- 📄 JSX templating system for building dynamic documents
21+
- 🔗 Full TypeScript support for type safety
22+
- ⚡ Dynamic data integration through props and APIs
23+
- 📊 Real-time preview server with hot reloading
2224

23-
- **Structure**: Create clean layouts using HTML's powerful tools like flexbox, grid, and tables.
25+
## 💡 Example
2426

25-
- **External Libraries**: Seamlessly integrate web libraries like FontAwesome, Bootstrap, and KaTeX
27+
To see the full power of htmldocs, here is how you might build a dynamic invoice document template with JSX template variables:
2628

27-
- **Dynamic Templates**: Leverage JSX to create reusable document templates with dynamic content:
28-
```jsx
29-
function Invoice({ customer, items, total }) {
30-
return (
31-
<Document>
32-
<Page>
33-
<h1>Invoice for {customer.name}</h1>
34-
{items.map(item => (
35-
<LineItem {...item} />
36-
))}
37-
<Total amount={total} />
38-
</Page>
39-
</Document>
40-
);
41-
}
42-
```
29+
<img src="https://github.com/user-attachments/assets/40e4ec91-e5eb-483a-ba28-14c6fd57ad8b" alt="Invoice template with htmldocs" width="100%" />
4330

44-
- **Data-Driven Documents**: Generate documents programmatically by passing data through props or fetching from APIs. Perfect for invoices, contracts, and reports that need dynamic content.
31+
To change the customer details, all you need to do is render the `Invoice` component with different props:
4532

46-
- **Version Control**: Track document changes using Git and other version control systems
33+
```tsx
34+
<Invoice
35+
customer={{
36+
name: "John Doe",
37+
address: "456 Main St",
38+
city: "Anytown",
39+
state: "CA",
40+
zip: "12345",
41+
phone: "123-456-7890",
42+
}}
43+
items={items}
44+
/>
45+
```
46+
47+
## 🎨 Editor
48+
49+
![Resume example](https://github.com/user-attachments/assets/24eabc4a-ec9e-43de-a2a0-00bcde55985a)
4750

48-
- **Consistency**: Maintain uniform document styling across your organization through shared stylesheets.
51+
![Variables editor](https://github.com/user-attachments/assets/d16658ea-4d53-4dc2-8c74-696012c4ce9b)
4952

50-
## Install
53+
## 📥 Install
5154

5255
To create your first htmldocs project, run the following command:
5356

@@ -57,25 +60,7 @@ npx htmldocs@latest init
5760

5861
For further instructions or to integrate htmldocs into your existing project, refer to the [Getting Started](https://docs.htmldocs.com/getting-started) guide.
5962

60-
## Getting Started
61-
62-
Create your first document with htmldocs:
63-
64-
```jsx
65-
import { Document, Page } from "@htmldocs/react";
66-
67-
export default function MyDocument() {
68-
return (
69-
<Document size="A4" orientation="portrait" margin="0.5in">
70-
<Page style={{ backgroundColor: "#000", color: "#fff" }}>
71-
<h1>Hello from the dark side</h1>
72-
</Page>
73-
</Document>
74-
);
75-
}
76-
```
77-
78-
## Components
63+
## 🧩 Components
7964

8065
htmldocs comes with a standard set of components to help you layout and style your documents.
8166

@@ -86,24 +71,18 @@ htmldocs comes with a standard set of components to help you layout and style yo
8671
- [MarginBox](https://docs.htmldocs.com/components/margin-box)
8772
- [Spacer](https://docs.htmldocs.com/components/spacer)
8873

89-
## How it works
90-
91-
htmldocs is a modern toolkit for building documents with web technologies. It automatically handles the layout and chunking of your document into pages, templating variables using JSX, and hot-reloading your document.
74+
## ⚙️ How it works
9275

9376
htmldocs is built upon Chromium's rendering engine, which means it can render any HTML, CSS, and JavaScript. This is different from other tools like [wkhtmltopdf](https://wkhtmltopdf.org/), [WeasyPrint](https://weasyprint.org/), and [Prince](https://www.princexml.com/), which only support a subset of HTML and CSS.
9477

9578
htmldocs also uses the [Paged.js library](https://pagedjs.org/) under the hood. Paged.js is used for layout and chunking, as well as more modern features like margin boxes that aren't fully supported by the W3C's CSS standard.
9679

97-
## Tech Stack
80+
## 🛠️ Tech Stack
9881

99-
| <img src="https://nextjs.org/static/favicon/favicon-32x32.png" width="48px" height="48px" alt="Next.js"> | <img src="https://www.typescriptlang.org/favicon-32x32.png" width="48px" height="48px" alt="TypeScript"> | <img src="https://user-images.githubusercontent.com/4060187/196936123-f6e1db90-784d-4174-b774-92502b718836.png" width="48px" height="48px" alt="Turborepo"> | <img src="https://pnpm.io/img/favicon.png" width="48px" height="48px" alt="pnpm"> |
82+
| <img src="https://github.com/user-attachments/assets/df03494d-44a1-4a74-9ae6-1ee9870c2ce2" width="48px" height="48px" alt="Next.js"> | <img src="https://www.typescriptlang.org/favicon-32x32.png" width="48px" height="48px" alt="TypeScript"> | <img src="https://user-images.githubusercontent.com/4060187/196936123-f6e1db90-784d-4174-b774-92502b718836.png" width="48px" height="48px" alt="Turborepo"> | <img src="https://pnpm.io/img/favicon.png" width="48px" height="48px" alt="pnpm"> |
10083
|--------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
10184
| Next.js | TypeScript | Turborepo | pnpm |
10285

103-
## Contributing
104-
105-
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
106-
107-
## License
86+
## 📄 License
10887

10988
MIT License

0 commit comments

Comments
 (0)