A Progressive Web App that easily converts DOCX files to HTML while preserving styles
Designed for ThePathofTruth 🌲
- 🌱 Create from clipboard or start from scratch.
- 🌗 User can select theme color & dark mode.
- 💦 Last document is kept between page loads.
- 🧱 Full offline support. No internet required.
This app uses the best, modern practices available (PnP, tree-shaking, code-splitting, etc.)
Every package is an ESM module, selected to be as lightweight as possible. The result is an app that builds fast with a small footprint, under 55Kb (first-paint, Brotli compression)
| Package | Description | Size (br) |
|---|---|---|
| htm | JSX like component templates | 0.6 Kb |
| alpine | A simple reactive UI framework | 12.5 Kb |
| twind | Tailwind styles using CSS-in-JS | 13.5 Kb |
| quill | A powerful WYSIWYG editor | 36.8 Kb |
| highlight | Color coding HTML syntax | 7.3 Kb |
| vhtml | Creates html render functions | 0.7 Kb |
Vite brings a super-fast development experience powered by esbuild under the hood. The production bundle is handled by Rollup through Vite.
Every package could be loaded over a CDN. Features like JSX templating and CSS-in-JS are possible in the browser without any build step.
This project is designed to use Yarn 2 and Node 12+. Everything should already be configured so that you can clone the repo and run yarn to install the PnP packages.
Please use Visual Studio Code with the following extensions for the best experience. They are recommended automatically if you open the repo's workspace in VSCode.
yarn dev - Start a super-fast development server
yarn build - Bundle and optimize for production
yarn start - Serve the final build for live use
yarn preview - Build and launch the app locally
yarn analyze - Build and visualize app bundles
yarn clean - Clean cache & remove build output
Alpine is the perfect UI framework - but out of the box, it does not have a concept of components like React or Vue. So to create "components", we use a render function that returns an html string. From there, Alpine binds the markup to its reactive data.
The render function html, is a template literal which allows you to use JSX-like syntax to define a component. The concept comes from lit-html and others. Make sure you have the lit-html extension installed first. It will provide syntax highlighting and formatting for html.
The html render function is provided by Preact's htm and vhtml, which provides the JSX syntax without a build step. See the full documentation to see everything that is possible.
tw, css & apply are provided by twind, and fulfill all styling needs in the app. Twind provides unlimited tailwind styles on demand in the browser.
import { html } from 'globals/twind'
import { tw } from 'globals/twind'
let styles = {
root: tw('bg-red-500')
}
Alpine.data('counter', () => ({
count: 0,
get message() {
return `Count: ${this.count}`
}
}))
export default () => html`
<div x-data="counter" class=${styles.root}>
<button @click="count++" x-text="inc" />
<button @click="count--" x-text="dec" />
<p x-text="message" />
</div>
`All deploys are handled automatically with Vercel