sdocs-dev 1.2.0 → 1.3.0

package/public/sdoc.md

@@ -0,0 +1,542 @@
+---
+file: sdoc.md
+---
+
+# Meet `sdoc`: A markdown-first cli-native replacement for Word & GDocs
+
+
+(**TLDR:** `sdoc path/to/README.md` opens your file at https://sdoc.dev with pleasant default styles which can be altered. Share the url to share your file + custom styling. **Your file never hits the SDocs server:** Encoded file content lives in the URL fragment (`#...` part) which browsers don't send to servers. CLI: `npm i -g sdocs-dev`. SDocs is [open-source](https://github.com/JoshInLisbon/SDocs). You're reading markdown right now.)
+
+---
+
+If you're working with agents, a document written in markdown is <ins>officially</ins>* 407 times more useful than a document locked inside a `.docx` or `.gdoc` file format. Because of this, I believe Word and GDocs' days are numbered. (*I am the official.)
+
+But while markdown is great for agents, it's a bit annoying for humans. Quickly and elegantly reading a `.md` file requires you to open your code editor and enter "preview" mode. Sharing a markdown file requires you to actually send the file to someone. They then have to download it and find the least annoying way to read it.
+
+SmallDocs is an [open-source](https://github.com/JoshInLisbon/SDocs) attempt at something different. It lets you (or your agent) easily, elegantly and <ins>100% privately</ins> **read**, **format**, **share** and **export** `.md` files.
+
+Reading a `.md` file in SmallDocs feels just like this (you're reading markdown right now). And by playing with the styles, you can create things like:
+
+![Examples](https://sdocs.dev/public/images/examples.png)
+
+(Check out: [Slow Reading](https://sdocs.dev/#md=jZTdbuNGDIXv9RQHykWBrS1Ijp04LlAgSRF021wEmwC5piRKM_BoqJ0ZxdAWBfoQfcI-STFSfnc3Re8MknN4-JHycrlMgg6Gd0jvFOPcBUiDWyMHfGKqtW3TxIfRsN8lQCM2XFGnzbhDei2O0gQoyfOV2HCrv_AOxTYBjLb8K-tWhR2K7CwBFFPNzu_wx1uRG0NjQ9rhF-17Q2O6gK8o-imyYoGOXKvthYQg3Q55tsGfUax40pl7rrL1HF-9jRfZ6RTvY_itVJEdTymj7T5ma67EUdBid0itWE6ndGmk2n8eJHAsKsXV7O51HdQO68WrTnl2tnnUi0MnQORS7Vsng613SI8aak6aPJ0ylRhxMbiqVutiOwdfEXrOb8v1pjierbx4fU5Tvlmt6qf097xePpXWazo9oXTxtasNN3ySLl40T8oNrflJs5J6Vnv7KudtXb1-dUrrZlXNr2py--8RKLigYv0VAc7rTbV-n8Cj7_cI8LZab-l_EdiWJ2fF-hsCK1qtiu3rWcotbc_y_ybw7asXo8vlMkmO8M7nlCQfLQgHcaaG9EF3-gvXaMTB73XXadsuEBQ7hvYgfB40Bzgu2ZjpOt2sA2_kYMYsSY6OcK9G3PbMNX7XxnhcStc7Vmy9FpskPyN97I5mcFZ7xT72QKdtDbFmxEEHhY4CO03GR9N7KwfDdcs_QYfoJSht91EjKAroaM8eh_jzwJMpyOB8luKfv_7Gb6IsrqXac5JEEPTAjlpGz86Lnco9Vps8cqh9DEcvQ-BsnmP5NGUVRdmjd9JpzygWeZ7_mOFiiFA8k6sUKrFe-8A2mBFeycHPHksexdY4yXMc-i4u6xUW1E56jyCwTA5f2MkM8045Ztw4qoKu2MfYEYoMn3hyNYHryVHrqFdJcsGNOEYnD9Gv2MUMQwdQS9pm0yF4rqKTnryH4weOjCd2UazRzgeIjfvwnutsbrnKcO7agefdxEIaghKXJB8bjDKA2mh0yvIDuzEuqF3E1A-OYSU830pcyWOYSi-u1LbNcDN4Nd11hnO_x4eDGj889j7OcGnE89S2FNnPayzZv4gq6nu2HtQEdpMhH6TPcM3zWLpm8vAcguEM906HyZSazlAcyELJ4Gbo57jSlgzulAytCnO7hnyIHQ80xj0NNv49BLI1vHQ8K-lpha1-4Ig86I6z5F8&theme=light) | [Lisbon](https://sdocs.dev/#md=G84IAJwHttuUEHFQPlxYpOhgSSgVQFp8P13Wu6l-iCZAcMSl7NHuaUHaN5IT7qtU6qytzW5JHqsLLwqDFlUkbXez7_f7DdnjD5EoFjqpUW06u2ff_SL6PngTs1CIDCURLUkk8xiu7jtsMECc4i74c6TYLu81PkzpJ9YMUXwUr03Hq_T6ewIcDf3-XuOfIenbeJUQAkOsMBhp_V6r2yUEqKEam1eTSQm54wXf68Wv7-7MuSOKH6Q-vhiY4XAecgdvjQhZt5KG1Lev-KpPFmx1LanZBGvdq-HR_Rn_YNzJBBmzBewZtGzETGFz0TuE3-WEGQByB5Kpg-MT4YkAmRIpMBjCwc56FgjOTmCjtxfh7QnZ5uzzGHbDcmCs47yw-9Jec3Zo0eOLUxk_t_7Gsz1237To76TorCVGPKlLgVx-IRSm1OaqtjFjZ-eshCkWl7uZBYmZeW0czzVmOI-vfiOAPW3R3yELc8UNZeZ5EygumUqvHhbef_-zQUKUC5WndMx9mrDybrpwQV_veCDNPLvp3G10YsfVIOWOng6ShlT5o6RUWlQvUQoA96uZgjRjY2Me4eEqIjVpZ_QYVmfDmT1TouYHI2Q7mKnFg8mpvvxIrebyhP-k3eOfnZ4D7SvKxlpszUU64Wg4QG6gSVr1xNHa7mvZdCZ4GEtqJJnVuhyiMvU1QbOqiOstGk1Q-WswukUGA85wKlmUHRQ4WUgguWzC27Ia1CgmCapmweMgKw_kwmDDiddtjacBZzx4N4QX4kx1InUC8_N_MOz9Jo7MUAqan68U51eUlMPGp9Q_9kVlXRk06moZpiX-S042J9FU_fuOy3uVoTk-mZIHlyeIg2pvSx488YKIMilPcY61hko2snlKq6J8ZTNF_sywB6yTwuSId7bs4DuxxzXAliCKXrkp0KoDNcqKju8mJav86P-0UgIWMAEdNKdlVigITZrU6IJTPCqOGYCeE-FbLju7sX39NmW_6CeaS-Ev3-pj7uPfTaE3KqfdMqcadokLRPf7eyytmU9dr0g3-x7UJJSzoC03LAN586txOhJkfdgINRVpuw5DMIXDoy_4v4lKwPTGceOGNNi1oZ2sMzzmgRRdOHPxRvvlKsigNIQEoauWwrcFqKEWnQ-nVgfZgCdrU3bAEkTmyZS78yUPvMX5A8I87bE3NKUd1gN_j8uA0aGGcsY-xRGBaJMJ9xte3hp9qJHEtl8C4pGWHD0TrzO1pjReKtR82pP2czszeFHzCU0KAw&theme=light) | [API v2](https://sdocs.dev/#md=jVTtbtpIFP0_T3Fl1D8RNh4DDvaPlfJBdiO1aupktdKqUhg81zDFnqEzYxJaKu1D7BP2Saqx8YbQZlsLieGce-85Plzb931ihS0xBe_s5hoyLFCjzBE2kUeM3ZZoUgJQKGmvWCXKbQrerap1jnDLpIGhRwDmzOCVkvZWfMIU6JgAlELiHygWS5sCDWIHLZFx1CaFz8_HZWqurPL6UDG9EPJcWauqFMJgCF9cG-062vFRi0bPURqMWnx4jNNxQ6wdfqyQNFSuOHZdKXhXQjN4o6TyGnZeqnz1sVa2qZkrzVH_JbhdphD1D5S6aaUw1lWaNcuFXDiCjvsgJEfZhBHty1w2BMDFl68WWtWSp-D1iubyGiZXpdIOjEZREu3Bgxz_4ymjGI1aw034q2d0mMQJZx3d3e-RblxMCub1n7qS8XAShl3Xj3K4OBLo_3RmPI75adzO5EyvfpRAyCmlp0cJ5AmnPHk5gSIs4iJ_MYHxhMVF8f8J0JjOo-jQbVGweHz6SwnsBY4T-H7mZJ6MEnQzfd8npAfHzx0h58wg_Jm9TmG2tHZt0sGArUWAj6xalxjkqhpsohkhvR6c1XaJ0oqcWaEkIWdlCRo_1misaQ5CIzA4R6ZRg1UrlCAk2CXCzPUqLT41rbN9qikhs9mMPOPSrt-s7kuxwfsgCJoq52Aq-VoJaY371YObt7d3MOAqrytswAuNzDoPEh-gw4NG5YNRknwmAF7zDvJS8N7VTFvU5RYyXCttvb6jC6UrZh1fMb3i6kG2eK6kRdkQPXhHIUNTl9a8l-9lhhuUNcJC4wNEw1dBEHjkS-v65CRDs1bS4MkJfP3nX5hFIYXWKJ8dWRPcjecqv588Rquk2Cu3xfetqyiMYj8c-jS5o2Eaus_fbV2tS1fw8t_4FNXgQKNz6hL9fXoY6CAVnJAMrRa4cbF2DMy3cH0ZEPIbZC7wUlTCvW_C8Gkh1qihErK22Bzd5q1wG7Q6l9PX07vpd1I3qCsmUdpyCxxLtGgOVAO4WwoDLHd7AjmTUlmYI9SSK4lBuyFaKw0XiqMhZNccYAdvkEkhF7AjO7-59l_uRHYwCkPYwbXcsFLw7g5grvgWWpq6GcIYN0NpEPvKdsXbkhHs4LKLxxkr3GPZklECu4OgAB9zRI6O_QY&theme=dark) | [Building CLI](https://sdocs.dev/#md=pVbdbtvMEb3nUwzkiwAqKViSJdsC2iBxkiZA2y-wnaa983B3KG683GF2llKUtkAfok_YJyl2KSqy4lxVd-L87NkzZw5ZFEUmYWdJVhlAxS68w8bY3QpGd9x5RXCHTmA-ygBKFHrHLtyZ77SC6SIDsMbRezLrOqxgOrnMAGpCTV5W8I-n3W655MBwZ7Ec5SAKbeyRQ4N-bdxrDoGbFZxPLuBfsct0aNAfNpvM8vT38_6wy_PzPnH2NHE6WfwicX6aOD3JXA6ZFyeZz6e1Mevk_j9f5zrlWuMeY7omxR6DYbeCkWNHoxRWrGk4cwWjhh1Li2ofLS2rx68dh5RTstfkPxsd6hVc5Mc490dJiHmxgXHriGG-yME4TS6BXO7TIuYMII5VPa49d06vYHRWLarLCkcpotiyjw-nOJvPZ_3DfjSH0Lm6wOUe6TCOH3WLBV0uDsH50yAtq4UaggNFPxrPl9c4HcIDRU_B0hVRtRjlP6qWenalr4eq56i7ORxAuKDrUX7aU1cXFR73vMDFYnnV99ToH5-j7VxNZ7PzE9rUlV7S4lnaLrWeV-oXtC0v6aq6_gVtS6LL8vKXtD1t_Dxt0-XsfD47viJeXpUV_j-0TadTnD2h7erq-hpTz6IosuwMXnfGauPWgHDzpw9wX2OAW5KWVBD4EAQ-CXnJslewZtaguGnQ6SLuGARmC1JzZzVURBaseSRAUOw25CXtFGxNqAHh0fHWkl4TlpYiHku47gj---__xHxlhHKoybZVZ3NAp8HRhnyMaRJFLoKcwHvy9EKg5i0EhjKCB3Y0ybKzM_jojVOmtQTTFbxh-M0R3Nfxcp_J2ix7uyG_A-nK_S0G7DVuImwxbm0pBy43hjuBtvMtC03gQwU77kChexEgovGmJNhGqnBgBDSTgHERDQi5QE5RDia8ENAcMQRmaDpVT7Ls4eGhRKmzM_gjs16BsoR-OC8TzQqkRk9w-_bVmz-_nTQaDr8zUNzu9vGotEiEsqYtGb3eF6uaGoSff2fQeuMCpLcLtJ5b8sGQJCWgXgE2pVl33EnfqPWsSOQIR1FwF9ou_D4dXRSHk6EoHBel562QjzfMsvua4JMz36CtjWXhtt6BkUjil04COJaAdm0wiSAxlTT26W-n45yt4I6cmCidN1RhZ4Pk8K6zFm7YBc-2P-w7eS4Uu8qsu97Sgb615E0cxjDtkoC-KbKWXJjA6y7AtiYHXdQ5OKIo8tQzh7XZEJgQGQ41NUnL3AVQ5KlhtzsaZaLLU8s-PBnXwHu68Zb9o6TbekINDWvKQfcX6mcip42Kop_VoVFCGAFtCR9fArfkIrhhpOjI_tzD4_YYzBZd6IvS58RLqMmnixrpJ_cHeNVvd4gi9_S1M54EnlIbF5Aib1VnwQjgUUmNAhUaSxowgAkShdeg38EXLtN4zyBObD9NuAuoHrPs79z5gRABctEq4-554NY4w04mcFMzC_UD0WRNSR4D2d0qy6YTGI9_S_qEin2DYTxOdMe7NiwhbSunYYNCIdgaJ9kslv2VfMliwm5f8rUzFKDcDXByeCiKTUqih14ycRSks3ksv8OKDrWaJPhOhSgfVJEsGUjsOYzQDLvsIpZ-JJ_AOkX7-gol6gF96NocLH7fgWVMNl2xh2iMu5CMjazQybLMV4OBp2t_NC1Ft44WHh0-zciaTe9W6IAUy04CNRP4EGetaB9MLHpugENNPhVKcuYWRUigN4Iog5QgE3jPjj2E2ki_Q6jC0YoojDsfSKIm_wlJpM96lARtXL8szxb13vds0e-O7F1SiyzKp8A1uXAwL3gGwBmg20XD050ivz89LUPU6m1nSRL5A59wY4L5Tk5q02ZZAeOxBB3NwfR5GgOOx3nERd4PTxsSwTVJKnj7zYT0NSDQYAjk9-N_OH9IydKp6L45OHZF9Lb0NK5V5yl1-AuDcYEi0VFrreemDTIe9_rsKUmb2Zq2r7hLwuw86f38huSHovgi7B5ifhqwTrqKS3qPEgjuSUKW3XauX8ikoyqNm6AyXgIE01Dev_AdA_p115ALMoHPvSW0LTl52X9jNBxjh-VMzi0BA-3tcUNo5VjpWEZy44s_vkTTC9nvZZ7wJP9-kTBMsv8B&theme=light))
+
+Creating a SmallDoc for a `.md` file (+ automatically opening your browser to read it) is as simple as:
+
+```
+# npm i -g sdocs-dev
+sdoc README.md                # open styled in browser
+sdoc share README.md          # copy shareable link to clipboard
+```
+
+#### Claude Code + SDocs
+
+Teach [Claude Code](https://docs.anthropic.com/en/docs/claude-code) about `sdoc` so it can read, style, and share `.md` files across all your projects:
+
+```bash
+npm i -g sdocs-dev
+cat >> ~/.claude/CLAUDE.md << 'SDOC'
+
+## SDocs
+
+SDocs (sdocs.dev) renders markdown with clean styling you can adjust.
+Content lives in the URL hash — nothing hits a server.
+
+Use it (or offer it) when the user wants to read, share, or export a `.md` file.
+
+The `sdoc` CLI is installed globally:
+- `sdoc file.md` — open styled in browser (great for easy reading).
+- `sdoc share file.md` — copy shareable URL to clipboard.
+- `sdoc schema` — how to adjust all stylable properties (fonts, colors, spacing).
+- `sdoc charts` — chart types, JSON format, and styling. Charts render via Chart.js from ```chart code blocks.
+- `sdoc --help` — full usage.
+
+Source: https://github.com/JoshInLisbon/SDocs
+SDOC
+```
+
+#### Codex + SDocs
+
+Teach [Codex](https://developers.openai.com/codex) about `sdoc`:
+
+```bash
+npm i -g sdocs-dev
+cat >> ~/.codex/AGENTS.md << 'SDOC'
+
+## SDocs
+
+SDocs (sdocs.dev) renders markdown with clean styling you can adjust.
+Content lives in the URL hash — nothing hits a server.
+
+Use it (or offer it) when the user wants to read, share, or export a `.md` file.
+
+The `sdoc` CLI is installed globally:
+- `sdoc file.md` — open styled in browser (great for easy reading).
+- `sdoc share file.md` — copy shareable URL to clipboard.
+- `sdoc schema` — how to adjust all stylable properties (fonts, colors, spacing).
+- `sdoc charts` — chart types, JSON format, and styling. Charts render via Chart.js from ```chart code blocks.
+- `sdoc --help` — full usage.
+
+Source: https://github.com/JoshInLisbon/SDocs
+SDOC
+```
+
+#### Gemini CLI + SDocs
+
+Teach [Gemini CLI](https://github.com/google-gemini/gemini-cli) about `sdoc`:
+
+```bash
+npm i -g sdocs-dev
+cat >> ~/.gemini/GEMINI.md << 'SDOC'
+
+## SDocs
+
+SDocs (sdocs.dev) renders markdown with clean styling you can adjust.
+Content lives in the URL hash — nothing hits a server.
+
+Use it (or offer it) when the user wants to read, share, or export a `.md` file.
+
+The `sdoc` CLI is installed globally:
+- `sdoc file.md` — open styled in browser (great for easy reading).
+- `sdoc share file.md` — copy shareable URL to clipboard.
+- `sdoc schema` — how to adjust all stylable properties (fonts, colors, spacing).
+- `sdoc charts` — chart types, JSON format, and styling. Charts render via Chart.js from ```chart code blocks.
+- `sdoc --help` — full usage.
+
+Source: https://github.com/JoshInLisbon/SDocs
+SDOC
+```
+
+#### opencode + SDocs
+
+Teach [opencode](https://opencode.ai) about `sdoc`:
+
+```bash
+npm i -g sdocs-dev
+mkdir -p ~/.config/opencode
+cat >> ~/.config/opencode/AGENTS.md << 'SDOC'
+
+## SDocs
+
+SDocs (sdocs.dev) renders markdown with clean styling you can adjust.
+Content lives in the URL hash — nothing hits a server.
+
+Use it (or offer it) when the user wants to read, share, or export a `.md` file.
+
+The `sdoc` CLI is installed globally:
+- `sdoc file.md` — open styled in browser (great for easy reading).
+- `sdoc share file.md` — copy shareable URL to clipboard.
+- `sdoc schema` — how to adjust all stylable properties (fonts, colors, spacing).
+- `sdoc charts` — chart types, JSON format, and styling. Charts render via Chart.js from ```chart code blocks.
+- `sdoc --help` — full usage.
+
+Source: https://github.com/JoshInLisbon/SDocs
+SDOC
+```
+
+## How SmallDocs work
+
+### URLs
+
+The URL format for SmallDocs is:
+
+```
+https://sdocs.dev/#md={compressed & encoded .md}
+```
+
+Your entire document (content and styles) lives in the URL hash.
+
+To keep URLs as short as possible, SmallDocs compresses your markdown using [Brotli](https://en.wikipedia.org/wiki/Brotli) (a compression algorithm developed by Google, loaded via a small WebAssembly module) and then encodes the result with [base64url](https://en.wikipedia.org/wiki/Base64#URL_applications) (a URL-safe variant of base64 that avoids characters like `+`, `/`, and `=` which would otherwise need percent-encoding). Style properties that match built-in defaults (e.g. `fontFamily: Inter`, `baseFontSize: 16`) are omitted from the URL — only values that differ from defaults are included.
+
+The `mode` parameter controls which view opens. Valid values are `read` (clean reading view, style panel hidden), `style` (style panel visible), and `raw` (raw markdown editor). When sharing a link for someone to read, use `mode=read`:
+
+```
+https://sdocs.dev/#md=...&mode=read
+```
+
+You can also link directly to a section using the `sec` parameter. Click any heading's link icon to copy its section URL:
+
+```
+https://sdocs.dev/#md=...&sec=url-formatting
+```
+
+The `sec` value is the heading text slugified (lowercased, spaces become hyphens, special characters stripped). The page will scroll to that section on load.
+
+The `theme` parameter forces a specific theme: `theme=light` or `theme=dark`. This is useful when sharing a link where the document looks best in a particular theme. The override is view-only — it applies for that view but won't change the reader's saved theme preference.
+
+### Privacy
+
+Because the SmallDocs url format is:
+
+```
+https://sdocs.dev/#md={compressed & encoded .md}
+```
+
+Your document never hits the SDocs server.
+
+This layer of privacy is built into how HTTP works. The hash fragment (everything after the `#` in a URL) is never sent to the server by the browser. It always stays entirely client-side:
+
+> "The fragment is not sent to the server when the URI is requested; it is processed by the client" - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment)
+
+The [sdocs.dev](https://sdocs.dev) site is purely a rendering space. JavaScript reads `window.location.hash`, decompresses and decodes the content, and renders your `.md` locally.
+
+### Formatting
+
+SDocs adds basic styling to markdown files. You write your content in regular markdown and the styles live in a metadata block at the top of the file.
+
+That metadata block is called [YAML front matter](https://jekyllrb.com/docs/front-matter/). It's a convention that started with [Jekyll](https://jekyllrb.com/) (the static site generator) back in 2008 and has since been adopted by [Hugo](https://gohugo.io/), [Gatsby](https://www.gatsbyjs.com/), [Obsidian](https://obsidian.md/), and most of the markdown ecosystem. It looks like a block of key-value pairs between two `---` lines at the top of your file:
+
+```yaml
+---
+title: My Document
+author: Someone
+---
+```
+
+SDocs uses a `styles:` key with CSS properties written beneath it in YAML:
+
+```yaml
+---
+styles:
+  fontFamily: Lora
+  baseFontSize: 17
+  h1: { fontSize: 2.3, fontWeight: 700 }
+  p: { lineHeight: 1.9, marginBottom: 1.2 }
+  ...
+---
+```
+
+(Click "**Raw**" — top left — to see the front matter for this file. See all available properties [here](https://sdocs.dev) or by running `npm i sdocs-dev; sdoc schema`.)
+
+When a `Styled .md` file is rendered in the SmallDocs interface the specified styles are applied. If a plain `.md` file is rendered the default styles are applied. The fastest way to preview a styled `.md` file is with the CLI: `sdoc file.md`.
+
+#### Light & dark modes
+
+Colors set at the top level are light-mode colors. Dark mode is **auto-generated** by inverting lightness — light backgrounds become dark, dark text becomes light, same hue and warmth. You only need to set colors once:
+
+```
+  background: "#fffaf5"
+  color: "#1a1a2e"
+  h1: { color: "#c0392b" }
+  blocks:
+    background: "#faf0eb"
+```
+
+To override specific dark-mode colors, add a `dark:` block:
+
+```
+  dark:
+    background: "#1a1520"
+    h1: { color: "#ef6f5e" }
+```
+
+Colors cascade from general to specific — set `color` once and it flows to headings, paragraphs, and lists. Set `blocks.background` once and it flows to code blocks, blockquotes, and charts.
+
+### Charts
+
+Render charts in markdown using ` ```chart ` code blocks with JSON data. Charts are powered by Chart.js, loaded lazily from CDN only when a chart block is present.
+
+```chart
+{"type":"bar","title":"Quarterly Revenue ($M)","labels":["Q1","Q2","Q3","Q4"],"datasets":[{"label":"2024","values":[12,18,15,22]},{"label":"2025","values":[15,24,20,28]}],"format":"currency"}
+```
+
+```chart
+{"type":"pie","title":"Market Share","labels":["Chrome","Safari","Firefox","Edge","Other"],"values":[65,19,4,4,8]}
+```
+
+The JSON for the bar chart above:
+
+````
+```chart
+{
+  "type": "bar",
+  "title": "Quarterly Revenue ($M)",
+  "labels": ["Q1", "Q2", "Q3", "Q4"],
+  "datasets": [
+    { "label": "2024", "values": [12, 18, 15, 22] },
+    { "label": "2025", "values": [15, 24, 20, 28] }
+  ],
+  "format": "currency"
+}
+```
+````
+
+Supports 13 chart types: pie, doughnut, bar, horizontal bar, stacked bar, line, area, stacked area, radar, polar area, scatter, bubble, and mixed (combo). See the [full chart gallery](https://sdocs.dev/#md=G8UnAKyOt00DlHxWwjviQk58bNCHEZLMXjp1Z5n-3q1jp40U95IpNFHcxOkFh_Y1qbAHS6AbpMeoS_XEWiiA0suU-rzqL37KktMl6bZ160MSNPnhJPlKXrJ09TWLjkJX_7-1L8-6qsGeYTkr162RG2AVGeFzfLpeve6p1_V_D3CAqW91fVzCH2JFLAlUpGKrV8oguDEUlwaE3m6ZiM4W9xBWoM20RmRHHvB9eAlum_tUt5sls6pxXJDETdoI1mtn4ygyK3NKOiDQfOMfNkoleCUMqvDDsyh-Z1LjOM5yd7Tw-HQs0oShCG-aYfWyjiZSkatREH4PYX_RHNIDUBzd8FwnLPMdFKXBrkbxt5O4-oJeM-eDt5AHa9257284ROtNm9q3phEcD9cNugOB6wddF5TQBQ0o4fpBJ-BY1U9XTT9Qx61GwMkqy2zZlA3jqRh4qm4L16Agw_5OhebMz1aw6TN4qNpsU3OpeF_5RiZSediQfbXhw3sojD3QhC4QCLNQD5PkcjjqbKgnFbzm2xXK7SiVytxe6WEtm8_0XMFhbubs2qeChsZ2XUeZN8nK5DeReXVO8FuXcuFQFDfsB5fNkD40lBGzzRZo7Ffa_Wf6HSyW2X0JYjXztCBU9pr2nNpbqEZR-UsShVEkREQ6G2pohRhrMtIra6wwWs7EHBRxmEH0We0PAlAfLKMKKMDDmYPuuf41-AA3GthWgoDD4VikdsZzk1KSPZHUTpsNAfOzBBozpoABOV-7IFfIVMUBG6ODFRPd5-9eTVxku32Vwqaoc1AP7WFip2SskyZCysbQZGldmfKtfzAjCfUWrnG-9BAtrNQqKq8brS1ARlhxWiQFNSNATgm90IACPARNhf5JbL3J8iYJiAMpM4F-yGzGS_Mf7OBpkpC8WC1MXGnTHp2wCJzWxE5R5RUbOVnyCab_6MbBxp2WX-1rIHlH2HtiYqH7ZyveX6iX1w2DgaxBHQiz5-ywBTnDsNfUqfoyY6rcK8HxDS0MeEZgJVzUUJXqHhmRMQV8bdVmmGZbIAajEu--k9yjKWr10qT2qgppMopso5SBb5MVJHlpuPfKhAl4SZyQQTHDrpkwLxWR7hIjNb9rdfUie3_q50syskidaYWBu_BofhiS9mSl9sRUshL010gZF0MHmn8bpR-LPnwlOohd1GgqYg-qnL26UvyJWIkKDOwMx3fxLMUzs9WDBw8ePHgQaHUzYEaX4KGAAgoooIACBOrVnThfQgECAgICAgICtRsBiwK1n8UBhtfkX5Lu156d-0VVx6-2dud2lUz-5tV6f9SRQD3-nj6_fnmJfv08OiNnZpCjGvGkHn1KlNHhW7ZwEm2s9Blo2-XciLHPJP5IZOFnJGmoTzl5TWhCE5rQhCaUcMwhFcUHN9NtyonuY2fKlYjGz5zwuuiUJBx9Cd24iLy99hL8OnFDSdqdKwt-n4izqyci2c8p5L8De1smbtsaOrW2sRSVG21R_LRNaJBsg8PQ6dI1XaErSR8jd26qVvXiwn3aM1VJhs43eMS1ZFTt5-Ap9q3TqjAzUZuYoR48ePDgQaBlk8Qcxp5uAgICAgICtYaIOY79kD6Usxkq2TSdQOzScglE2TVdExFD4U47ABs0KxGIs1_CnxskFUWMrOq1Kd4hR5_xAVi7jVSza4W9z6ailv3tYTbLtykdjBtolzrxTj2W7YlT-iXjOXoY_uzDQeNi4ynq60zuoQ9lNx7u_MGJPjK5eIsiGS9AdheUUEIX9ELLmslswGvxk-DTomTfeR7iCn6pT3UKd24D91WdeOjtu1Iy8Z5p6q0eTQPKYXNLb84Jrr8dCMrSVMLk8TTu9woslwiFHT4_A4c1fqfNMU2NxveIZ19OrQePHxV5sQl7hWJKGu-pYf9e6Rin5H26H4M1NTXY-3g3mFuvrfuvhoejcR2TPKJoTc25j7ewBGI0in7qoh8sEh5FM2Uz0ImIEeQJCDHlI0a1r2dNpeCiZkYXG435Yidn1teun0Px__MJfBFDsm35NiPtq5nhjIQhVgwvasz75NieY0brWNqvsK8G1QPNNqgI2O75F3_GpU0knaKPcTeufGqW9DpPQY3bgK96jQfWOftbC4nhnrU8dB2KKsJXo6gFnLas9m7IG5ufPmUkkewhyHCJCzZa4krQu6EPdEMTSqjz0oKHNi3CZzCWeUYM59nZRCMVYby2BfeeVos-W1vvtOposK-AENj5vdV4PuHtll17PtotJgllorG_EgWKNerXxHs8XhGFczlL6moURVh5WhTkUjb1_tfOYObbJRtHf3hvtT08QO0I86GEftAfUCeIHQ6HQEd8qraUs5mdmsk1GvN2wzApnCPV4rCUs2jq6Ld_FwNl_XCjAnl88mpuLxRljis2iknh_Vks_rdQvJI3lnxJ3CKZMpmZppL_K4m1v6Kewo6n-3NyBRwOh8MhgHJFyq8fdAJ2MPWOawad48xBd4LkUbf5kfwKRe1zr3OhtkorGPjF6dHHgbGbo5TqIJznaXAslG-G3cXSJ1fHgHtd8rSwhXXxyazphlr3ASvFq5ak7z1MJ-pDiNY-0AV9oQvqXO8q9SajpHWMYoSd0x7lRaiqxECQKkAF-MlVRKbLVO9Y_e0YBKkrRdFyk-63Acr8r_Par-fk4zNv4ysQdeyYrqg2y-86yGx7NLhBDSJud3i-4QG2KcD25wCEvfAY6eU6tdI87bnE05Bantv9KIVJdqbLVQbaQ_RtrUxarCQPLGtRVx9lrSt9MPCsLiajyQ_VxCHG8sFLjIzC0VuH5HRWZEWEJBeKtEu9gMMh0AWOut3QqiiD5j_owFsrWmMj0S4QiM2d8DimqQP4HRUn82wHPvH_VZq1oWRGXoCamq9pMXXHjctQyQCjCvY1rdqYW4HWWK2RFrtze25Mbdf0VurlZUOtS5cm2m7tfm2JbS4PIL08339eUWLhaNR9XcIukvT25yqELbQejcnb2dvPETgwJF4PkC_51mHY42hCCU0oIeRGSa388pcqKFYEt5q0oypb1DpSwIbf-_EZuKoO4yuVisSjHOlUGzB2q8OD04m0oi7lwRNva_wC2-10pqQjqbPcWXX3lt_XEGMsSow2Usgsfxr41vupbNiKIVvJ4uFtTD8iG8NmNszKdvuTWzWmzN0SChAQEBCoNZfM6xIKEBAQEKizicD5WLVHAXgwo7AvoKFhsbN8qzYO2RscCrgP6jxADvydlUyh_bwFIecm-d18mXV6CBAXTz2DpPojQax0AQ) for live examples of every type.
+
+Style chart colors via `chart.accent` and `chart.palette` in front matter. Run `sdoc charts` for the full reference of types, options, and styling.
+
+### Drag & drop
+
+Drag any `.md` file onto the editor to SmallDoc it instantly. Or from the terminal: `sdoc file.md`.
+
+### Exports
+
+#### Raw .md
+
+Your markdown content with all front matter stripped. Plain markdown, compatible with anything.
+
+#### PDF
+
+A styled PDF with selectable text, generated client-side.
+
+#### Word (.docx)
+
+A styled Word document generated from the rendered HTML.
+
+#### Styled .md
+
+Your markdown with the `styles:` front matter block included. This is the format SmallDocs reads back in, so your formatting is preserved.
+
+### Collapsed headers
+
+All sections (H2, H3, H4) load collapsed. This gives you an overview of the document structure before reading.
+
+Clicking a heading expands its section and all of its children. Clicking again collapses everything back.
+
+When a section has both direct content (paragraphs, code blocks) and child sub-sections, the collapsed state shows `...` to indicate there is content above the first child heading. For example, the Formatting section in this document shows `...` when collapsed because it has introductory paragraphs before the Light & dark modes sub-section.
+
+If you expand a child section while its parent is still collapsed, the parent's direct content becomes visible but is shown indented and subdued (reduced opacity) — so you can see the context without it competing visually with the section you opened.
+
+### Copy & paste
+
+Every header has its own copy and paste button. This copies its content and all of its children's content. At the moment this is the fastest way to get SmallDoc content into your agent's context, but we're looking for novel ideas to make this better.
+
+### Works offline
+
+SDocs uses a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) to cache all assets (HTML, CSS, JS, fonts) in the browser. After your first visit, the site loads entirely from this cache — no network required. You can open SDocs URLs and edit documents while offline.
+
+On each visit, the service worker sends a single request to `/version-check` in the background. This compares the cached app version against the server's current version. If they differ, the cache is purged and fresh assets are fetched — the update takes effect on your next page load. If the request fails (e.g. you're offline), nothing happens and the cached version continues to work.
+
+### Analytics
+
+We don't use any third-party analytics provider.
+
+The `/version-check` request described in the works offline section above is the only request SDocs makes to the server. Like any HTTP request, it includes your IP address, browser user-agent, referring URL, and the timestamp — this is standard to how the web works and is not something we add. The server logs these fields to stdout (a `console.log` line per visit, stored in the server's systemd journal).
+
+In addition to these standard fields, the version-check request includes your **cohort week** — the week you first visited SDocs. This is stored in your browser's localStorage under the key `sdocs_cohort`. For example, if you first visit on 2026-04-10, the value `2026-W15` is stored and sent with each subsequent version-check.
+
+This is not a unique identifier. It groups you with every other person who first visited that same week. A scheduled job aggregates the journal logs into weekly cohort counts in a local database — "of everyone who first visited in week 15, how many came back in week 16, 17, etc." The results are public at [sdocs.dev/analytics](https://sdocs.dev/analytics).
+
+We track retention because it is the strongest signal for whether a tool is useful.
+
+To opt out, there is a toggle in the top menu bar. You can also remove `sdocs_cohort` from localStorage in your browser's developer tools, or use a private browsing window.
+
+### Auto-save
+
+Because the URL includes your full document and dynamically updates via JavaScript, every change you make is instantly preserved in the URL. This works when you're offline.
+
+### File info card
+
+When you run `sdoc <file>` the browser shows a small info card at the top of the rendered document. It can carry three fields:
+
+- **file** — the filename. Lives in the YAML front matter and travels in the share URL.
+- **path** — the relative path from the directory you ran `sdoc` in. *Local only.*
+- **fullPath** — the absolute path on your machine. *Local only.*
+
+The two "local" fields are passed to the browser via a separate URL parameter (`&local=...`) that JavaScript reads into memory on load and immediately strips from the address bar using `history.replaceState`. So by the time you could copy the URL, the local data is no longer in it. `sdoc share <file>` never generates that parameter to begin with — so links produced by `share` are inherently path-free. If a recipient opens your shared URL, only `file` is visible.
+
+## The CLI
+
+### Installation
+
+SmallDocs has a command-line tool that lets you open, share, and style markdown files from the terminal. Install it once:
+
+```
+npm i -g sdocs-dev
+```
+
+This gives you the `sdoc` command.
+
+### Open a file
+
+```
+sdoc README.md
+```
+
+Your browser opens with the document styled and readable. That's it — one command to go from `.md` file to formatted document.
+
+### Share a link
+
+```
+sdoc share README.md
+```
+
+This copies a shareable link to your clipboard.
+
+You can also combine it with options:
+
+```
+sdoc share report.md --section "Results" # deep-link to a heading
+sdoc share notes.md --write             # link opens in write mode
+sdoc share notes.md --dark              # link opens in dark theme
+```
+
+### Start a new document
+
+```
+sdoc new
+```
+
+Opens a blank document in write mode, ready to type a `h1`.
+
+### Style schema
+
+```
+sdoc schema
+```
+
+Prints every available style property with its type, default value, and description. This is designed to be readable by both humans and LLMs — so your agent can write YAML front matter for you.
+
+### Chart options
+
+```
+sdoc charts
+```
+
+Prints the full chart reference: all 13 chart types, JSON data formats, axis options, number formatting, annotations, dual y-axis, palette modes, and styling via front matter. Everything an agent needs to generate charts.
+
+### Modes
+
+By default, files open in read mode. You can open in any mode:
+
+```
+sdoc README.md              # read mode (default)
+sdoc README.md --write      # write mode (contentEditable editor)
+sdoc README.md --style      # style mode (styling panel visible)
+sdoc README.md --raw        # raw mode (plain markdown source)
+```
+
+### Pipe from stdin
+
+Any command that outputs markdown can be piped directly into SmallDocs:
+
+```
+cat notes.md | sdoc                     # open in browser
+cat notes.md | sdoc share               # pipe to clipboard link
+your-agent --output md | sdoc           # pipe agent output to browser
+```
+
+### Default styles
+
+If you find a style you like, use the "Save as Default" panel in the Style view to generate a command that saves your preferences to `~/.sdocs/styles.yaml`. The CLI automatically applies these defaults to every file you open — unless the file has its own styles, which always take priority.
+
+```
+sdoc defaults               # view your current defaults
+sdoc defaults --reset       # remove them
+```
+
+### For agents
+
+The CLI is designed to work well in automated workflows. A few patterns:
+
+- **Generate a styled doc**: have your agent write a `.md` file with YAML front matter, then `sdoc share file.md` to copy a shareable link
+- **Learn the format**: `sdoc schema` gives your agent everything it needs to know about available style properties
+- **Learn charts**: `sdoc charts` gives the full reference of chart types, options, data formats, and styling
+- **Deep-link to context**: `sdoc share file.md --section "Heading"` creates a URL that scrolls straight to the relevant section
+- **No auth, no API keys**: everything is client-side — the URL *is* the document
+
+Agents can get detailed help on any topic via the CLI:
+
+```
+sdoc help              # general usage
+sdoc schema            # all style properties, color cascade, theme format
+sdoc charts            # chart types, JSON format, styling, annotations
+```
+
+### Set up your agent
+
+One-line commands to teach your coding agent about `sdoc`. Each appends SDocs instructions to the tool's global config file. Copy and paste into your terminal.
+
+#### Claude Code → `~/.claude/CLAUDE.md`
+
+```bash
+cat >> ~/.claude/CLAUDE.md << 'SDOC'
+
+## SDocs
+
+SDocs (sdocs.dev) renders markdown with clean styling you can adjust.
+Content lives in the URL hash — nothing hits a server.
+
+Use it (or offer it) when the user wants to read, share, or export a `.md` file.
+
+The `sdoc` CLI is installed globally:
+- `sdoc file.md` — open styled in browser (great for easy reading).
+- `sdoc share file.md` — copy shareable URL to clipboard.
+- `sdoc schema` — how to adjust all stylable properties (fonts, colors, spacing).
+- `sdoc charts` — chart types, JSON format, and styling. Charts render via Chart.js from ```chart code blocks.
+- `sdoc --help` — full usage.
+
+Source: https://github.com/JoshInLisbon/SDocs
+SDOC
+```
+
+#### Codex → `~/.codex/AGENTS.md`
+
+```bash
+cat >> ~/.codex/AGENTS.md << 'SDOC'
+
+## SDocs
+
+SDocs (sdocs.dev) renders markdown with clean styling you can adjust.
+Content lives in the URL hash — nothing hits a server.
+
+Use it (or offer it) when the user wants to read, share, or export a `.md` file.
+
+The `sdoc` CLI is installed globally:
+- `sdoc file.md` — open styled in browser (great for easy reading).
+- `sdoc share file.md` — copy shareable URL to clipboard.
+- `sdoc schema` — how to adjust all stylable properties (fonts, colors, spacing).
+- `sdoc charts` — chart types, JSON format, and styling. Charts render via Chart.js from ```chart code blocks.
+- `sdoc --help` — full usage.
+
+Source: https://github.com/JoshInLisbon/SDocs
+SDOC
+```
+
+#### Gemini CLI → `~/.gemini/GEMINI.md`
+
+```bash
+cat >> ~/.gemini/GEMINI.md << 'SDOC'
+
+## SDocs
+
+SDocs (sdocs.dev) renders markdown with clean styling you can adjust.
+Content lives in the URL hash — nothing hits a server.
+
+Use it (or offer it) when the user wants to read, share, or export a `.md` file.
+
+The `sdoc` CLI is installed globally:
+- `sdoc file.md` — open styled in browser (great for easy reading).
+- `sdoc share file.md` — copy shareable URL to clipboard.
+- `sdoc schema` — how to adjust all stylable properties (fonts, colors, spacing).
+- `sdoc charts` — chart types, JSON format, and styling. Charts render via Chart.js from ```chart code blocks.
+- `sdoc --help` — full usage.
+
+Source: https://github.com/JoshInLisbon/SDocs
+SDOC
+```
+
+#### opencode → `~/.config/opencode/AGENTS.md`
+
+```bash
+mkdir -p ~/.config/opencode
+cat >> ~/.config/opencode/AGENTS.md << 'SDOC'
+
+## SDocs
+
+SDocs (sdocs.dev) renders markdown with clean styling you can adjust.
+Content lives in the URL hash — nothing hits a server.
+
+Use it (or offer it) when the user wants to read, share, or export a `.md` file.
+
+The `sdoc` CLI is installed globally:
+- `sdoc file.md` — open styled in browser (great for easy reading).
+- `sdoc share file.md` — copy shareable URL to clipboard.
+- `sdoc schema` — how to adjust all stylable properties (fonts, colors, spacing).
+- `sdoc charts` — chart types, JSON format, and styling. Charts render via Chart.js from ```chart code blocks.
+- `sdoc --help` — full usage.
+
+Source: https://github.com/JoshInLisbon/SDocs
+SDOC
+```
+