The Story Behind It
Technical documentation sucks. We all know it. Yet, we all continue to use the same tools over and over again. I recently took a new position, and one of the tasks I have before I leave my current company is essentially documentation hell -- basically document all parts of every project you're on. It's a lot.
For this type of technical documentation, you generally have three options:
- A long a painful video that no one will ever actually listen through fully.
- Adding a bunch of readme's (boring and just as painful).
- Using something like notion and copying over snippets.
I know there are other tools out there, but I haven't found many that really merge the code with the rich text well to create a visually appealing editor and reader. Naturally, I decided to create my own...
The Product
It didn't take long -- maybe 3-4 weeks total -- but I ended up creating a decent documentation solution. It's called "Doclific" and is available as an npm package right now. It's free, open source, and a relatively simple codebase to navigate through.
It's basically what it would look like if Git and Notion had a baby. It's a pretty editor with a hierarchy structure for notes. It has slash commands. It has direct snippet references (no more copying and pasting). It's AI-enabled, just add your provider, model, and key. Best of all, it lives in your codebase -- no additional expense or outside documentation to maintain.
My Favorite Features
My favorite feature by far is the code snippet element. You can easily add it with the slash command, then find the specific file you want to reference through the editor, select the lines, and it'll display it right every time. If you change the code in your codebase, it'll reflect the changes next time you load up your Doclific. Additionally, each snippet has an attached link. When readers click the link, it opens a new VS Code window with the file and the cursor on the specified line. It makes finding and navigating through files very easy.
The AI integration is an AMAZING feature IMO -- and something not offered by other products in the space. Prompt it to generate documentation on a specific workflow and the agent will find the relevant files, select the applicable lines, add descriptions, headers, etc, and add it all to your doc with the code snippets.
Thank You's
Huge thanks to the maintainers of Platejs. They have many amazing rich text editor components.
Closing Words
Let me know your thoughts on this tool. If you have any suggestions or issues, let me know!
Top comments (0)