TPOT Scribe
A Progressive Web App that easily converts DOCX files to HTML while preserving styles
![](https://github.com/src/assets/preview.png)
Designed for ThePathofTruth π²
β¨ Features
- π± 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.
π¦ Tech Stack
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.
π°οΈ Development
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.
β‘ Extensions
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.
π» Commands
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
π Style Guide
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.
Component Example
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>
`
π Deployment
All deploys are handled automatically with Vercel