I’m creating documentation for an API and want to do it in Webflow with CMS. I’m assuming I’ll have more than one API in the future, so I’ve created a CMS collection called Docs. However, I don’t know how to go about building the actual documentation (or if it’s even possible). Something like this is what I’m going for. As you can see, there’s a navbar on the side of the page, sections/headings/descriptions in the middle, and a code block on the right. The code block will have to use custom code, but each documentation will be different and will have different sections, so how should I set that up in CMS? Should it just be a rich text block with the entire documentation’s body, or should I create multiple rich text blocks for different sections, or is there another way I should be doing this?
Yes, it can be done however you’ll face a lot of the same UI and content-structring issues you face building a learning management system ( LMS ) in Webflow.
Specifically-
Making the left-side nav grouped
Making the center content area capable enough for your needs
Handling the right-side code excerpts
A few tips and resources to get you on your way;
First, check Made in Webflow for any examples or template designs that could get you most of the way there. You might get lucky.
For the left-side nav, plan your CMS well and go simple with your design. If you want to avoid scripting, you can use a standard nested collection list there, but it will only show 5 sub-items and those will be fixed-ordering which is a pain to admin. Then you’d have a 6th item “view all” which would navigate to that category page, where it expands so that you can see all of them.
For the center, check out Refokus Rich Text Enhancer, it will give you a lot more capability for that Rich Text area.
For the code, - Finsweet has a code-formatting attributes, plus code copy. You’ll need to figure out how fancy you’re getting.
Just a note though, API docs are a big thing, and have become such a ubiquitous pattern that there are often interactive tools for testing and generation built in.
Webflow’s own API docs uses this approach, and it can make life a lot easier for your dev-users. Glancing through their code, it looks as though they may have custom built it, designed the UI in Webflow and then built a custom app using Angular and React.
"The first step was to set up a Webflow site. We migrated all of our articles into a Webflow collection, and added a handful of additional custom fields for tagging and organizing the help site.
This on its own would be a great help site, but since we wanted to have real-time search within our app (rather than having searches submit to the default Webflow search page), we added Swiftype on top of Webflow. Swiftype crawls the content and lets us embed a search engine within our app."
You can do a lot with Webflow and an integration or two.
Unfortunately, my documentation is for an SDK an includes a significant volume of code snippets in several languages. One of the really nice things about slatedocs is that the triptych format allows you to select your preferred code language once and then it’s retained throughout the doc. Doing this with inline code snippets in a 2 panel view would be pretty messy, so I think we’ll have to keep looking for a solution.
@ChrisDrit - don’t know how I missed this comment, but thanks! I think when I talked to Webflow folks last year they mentioned that it wasn’t Webflow for their docs, but I thought they said custom code. Anyways, I just signed up for ReadMe and I think I may either augment Webflow with that or just replace it entirely.
welcome to the forum
