Theneo

Theneo Quickstart Guide

API Reference

API Import & Specs

API Testing

API Changelog

API Versioning

Theneo Documentation

Editor

Web Editor Widgets

Live Collaboration

Preview Changes

Automation & Dev Tools

Github Actions

Visual Studio Code Extension

Theneo CLI

Theneo SDK

Bitbucket

AI Co-pilot & Chat

AI co-pilot

AI chat / chatGPT

Branding & Styling

Customizing project look

Custom domain

Custom analytics

Developer Portal

Developer portal styling

Templates

Custom design

Developer portal editor

Export / Import Code

Workspaces & Project Management

Workspace Configuration

Project Management

Product & User Guides / Docs

Getting Started

Theneo Guide

Theneo Quickstart Guide - discover how Theneo can generate Stipe-like API docs

Theneo User Guide

Production

Sandbox

<p class="slate-p " >Creating intuitive, detailed, and easy-to-navigate API documentation has never been easier. Theneo streamlines every step of the process, ensuring that your documentation is not only comprehensive but also interactive and user-friendly. Here&apos;s how you can quickly set up your project in Theneo</p><div style="text-align:center"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/9e442a2e-a6f2-47ec-8aca-6cdea5ff6827.png" style="
              width:788px;
	            height:443px;
	            aspect-ratio:788 / 443"
         /></div><p class="slate-p " ></p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >Before we dive into steps, did you know that you can use Theneo to create guides as well? if you would like to see guides for generating other type of docs other than APIs, please go <a href="https://app.theneo.io/theneo/quickstart/product-and-user-guides-docs" target="_top">here</a>.</p></div></div><p class="slate-p " >For <strong class="slate-bold">API docs</strong>, the steps are very simple</p><p class="slate-p " >When you log into Theneo, start by adding a new project from the homepage. Your project could be an API reference, a developer guide, or any type of documentation you need. Give your project a title, select the appropriate workspace, and you&apos;re on your way. For detailed instructions on workspaces, check out our guides</p><p class="slate-p " ></p><div class="steps-widget" style="width:100%;
  	min-width:100%;"><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >1</h6><h3 class="slate-h3 " >Uploading Your API Specification</h3><p class="slate-p " >Theneo accommodates a wide array of API specifications, making it easy to get started regardless of whether you have an existing spec or not. If you&apos;re equipped with Swagger, OpenAPI, GraphQL, or another format, the upload process is designed to be straightforward and efficient.</p><p class="slate-p " >In case you don&apos;t have a spec ready, Theneo offers tools to help you create one from scratch. Use our intuitive interface to define your API endpoints directly within the platform. For additional guidance on creating or importing your spec and ensuring format compatibility, check out our guide.</p><p class="slate-p " ></p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >If you do not have a spec, do not worry you can define that in Theneo as well, for more info click <a href="https://app.theneo.io/theneo/quickstart/editor/web-editor-widgets/request-widget" target="_self">here</a></p></div></div></div></div><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >2</h6><h3 class="slate-h3 " >Selecting Your AI Co-Pilot</h3><p class="slate-p " >Once your API specification is uploaded, you can harness the power of Theneo&apos;s AI Co-pilot to enrich your content. Decide whether you want the AI to fully generate the content, enhance what you&apos;ve already created, or if you prefer to proceed without AI assistance. If you&apos;re looking to streamline the setup, simply click on &quot;Quick Start&quot; to bypass the customization and move directly to publishing.</p><p class="slate-p " ></p><div style="text-align:center"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/88b6be9d-6320-4270-a4b6-675e6aa1e8f5.png" style="
              width:804px;
	            height:297px;
	            aspect-ratio:804 / 297"
         /></div></div></div><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >3</h6><h3 class="slate-h3 " >Setting Permissions and Fine-Tuning Your Project</h3><p class="slate-p " >Set your project’s visibility and invite collaborators according to your workflow needs. With Theneo, you can start with a private project and go public when you&apos;re ready, seamlessly inviting others to contribute. Manage these settings at any time to fit your project’s development lifecycle.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >You can change project level permission and even set up advanced access management later in the project settings.</p></div></div></div></div><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >4</h6><h3 class="slate-h3 " >Publish</h3><p class="slate-p slate-indent-0" style="0px">Utilize Theneo&apos;s editing suite for final adjustments before publishing. Preview to ensure everything is perfect and publish to make your documentation available to users. It’s documentation made simple, yet powerful and comprehensive</p></div></div><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >5</h6><h3 class="slate-h3 " >Optional steps:</h3><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><a href="https://app.theneo.io/theneo/quickstart/editor/web-editor-widgets" target="_top">Edit the project </a></div></li><li class="slate-li " ><div style="position:relative"><a href="https://app.theneo.io/theneo/quickstart/editor/preview-changes" target="_top">Preview the project before publishing </a></div></li><li class="slate-li " ><div style="position:relative"><a href="https://app.theneo.io/theneo/quickstart/automation-and-dev-tools" target="_top">Automate the flow</a></div></li><li class="slate-li " ><div style="position:relative"><a href="https://app.theneo.io/theneo/quickstart/ai-co-pilot-and-chat/ai-chat-chatgpt" target="_top">AI search </a></div></li></ul></div></div></div><p class="slate-p " ></p>

Creating intuitive, detailed, and easy-to-navigate API documentation has never been easier. Theneo streamlines every step of the process, ensuring that your documentation is not only comprehensive but also interactive and user-friendly. Here's how you can quickly set up your project in Theneo

When you log into Theneo, start by adding a new project from the homepage. Your project could be an API reference, a developer guide, or any type of documentation you need. Give your project a title, select the appropriate workspace, and you're on your way. For detailed instructions on workspaces, check out our guides

<p>Theneo provides a robust and versatile range of API formats and collection types to cater to a wide array of integration and development needs. Our platform supports various API formats, including REST, SOAP, GraphQL, and Async APIs, each tailored to different use cases and requirements. Additionally, we offer compatibility with multiple API specification collections, ensuring seamless integration and a streamlined development process. Below is an overview of the supported f</p>

Theneo provides a robust and versatile range of API formats and collection types to cater to a wide array of integration and development needs. Our platform supports various API formats, including REST, SOAP, GraphQL, and Async APIs, each tailored to different use cases and requirements. Additionally, we offer compatibility with multiple API specification collections, ensuring seamless integration and a streamlined development process. Below is an overview of the supported formats and collections:


In the following sections, we'll delve into each of these formats and collections, providing detailed insights and instructions.

<p>Theneo’s API Explorer is an interactive tool that significantly simplifies the API testing process. It allows users to engage with their APIs in real-time, providing an immersive experience that bridges the gap between technical understanding and practical application. Whether you're a developer or a non-technical user, the API Explorer is designed to offer a seamless and intuitive way to explore and validate API functionality.</p><div></div>

Theneo’s API Explorer is an interactive tool that significantly simplifies the API testing process. It allows users to engage with their APIs in real-time, providing an immersive experience that bridges the gap between technical understanding and practical application. Whether you're a developer or a non-technical user, the API Explorer is designed to offer a seamless and intuitive way to explore and validate API functionality.

<p class="slate-p " >Theneo’s Changelog is an essential tool for developers and stakeholders to track changes and updates to your API specifications. This powerful feature not only documents all modifications automatically but also provides an option for users to subscribe and receive email notifications for each update.</p><p class="slate-p " ></p><div style="text-align:center"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/8a7be86e-d55b-4859-b60f-b6292c22e06b.png" style="
              width:860px;
	            height:455px;
	            aspect-ratio:860 / 455"
         /></div><h3 class="slate-h3 " >Automated Changelog Documentation</h3><p class="slate-p " >Whenever a new API spec is imported and the &quot;Publish&quot; button is clicked, Theneo detects and summarizes all the changes, such as:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">New endpoints added</div></li><li class="slate-li " ><div style="position:relative">Existing sections updated</div></li><li class="slate-li " ><div style="position:relative">Descriptions modified</div></li><li class="slate-li " ><div style="position:relative">Sections or endpoints removed</div></li></ul><p class="slate-p " >These updates are meticulously logged on a dedicated changelog page, providing a detailed version history with timestamps.</p><h3 class="slate-h3 " >Real-Time Email Notifications</h3><p class="slate-p slate-indent-0" style="0px"><strong class="slate-bold">How to Subscribe</strong></p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Enter Your Email</strong></span>: On the Changelog page, there’s a field to enter your email.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Hit Subscribe</strong></span>: Click the “Subscribe” button to start receiving updates on the documentation changes.</div></li></ol><p class="slate-p slate-indent-0" style="0px"><strong class="slate-bold">Benefits of Subscription</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Immediate Awareness</strong></span>: Get notified as soon as changes are published, allowing for prompt action or adaptation in your workflow.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Convenient Overviews</strong></span>: Email notifications provide a summary of the changes, making it easier to stay informed without needing to check the changelog manually.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Version Tracking</strong></span>: Keep a close eye on version progression and ensure that all team members and API consumers are aligned with the latest API developments.</div></li></ul><p class="slate-p " ></p><h3 class="slate-h3 " >FAQ</h3><p class="slate-p " ><strong class="slate-bold">Can I turn off the changelog?</strong></p><p class="slate-p " >Yes, the changelog feature in Theneo is optional. You can disable it at any time by going to your project settings, navigating to the &apos;Features&apos; section, and toggling off the changelog feature.</p><p class="slate-p " ><strong class="slate-bold">Can I edit the changelog?</strong></p><p class="slate-p " >Currently, direct editing of changelog entries is not available. However, if you need to remove a specific entry from the public changelog, you can delete it. To do this, go to your project configuration, select &apos;Public Changelog,&apos; and use the delete button next to the entry you wish to remove.</p><p class="slate-p " ><strong class="slate-bold">Can I edit versions?</strong></p><p class="slate-p " >The ability to edit version details is a feature that is in the pipeline and will be available soon. This upcoming feature will provide more control over how you document and present version changes in the changelog.</p><p class="slate-p " ><strong class="slate-bold">Will this create a new API version if there are breaking changes?</strong></p><p class="slate-p " >Theneo is designed to track changes meticulously. The functionality to automatically create a new API version upon detecting breaking changes is being developed. When released, it will allow users to manage versions more effectively and ensure that versioning reflects significant changes or updates.</p><p class="slate-p " ></p><p class="slate-p " ></p>

Theneo’s Changelog is an essential tool for developers and stakeholders to track changes and updates to your API specifications. This powerful feature not only documents all modifications automatically but also provides an option for users to subscribe and receive email notifications for each update.

Whenever a new API spec is imported and the "Publish" button is clicked, Theneo detects and summarizes all the changes, such as:

These updates are meticulously logged on a dedicated changelog page, providing a detailed version history with timestamps.

Yes, the changelog feature in Theneo is optional. You can disable it at any time by going to your project settings, navigating to the 'Features' section, and toggling off the changelog feature.

Currently, direct editing of changelog entries is not available. However, if you need to remove a specific entry from the public changelog, you can delete it. To do this, go to your project configuration, select 'Public Changelog,' and use the delete button next to the entry you wish to remove.

The ability to edit version details is a feature that is in the pipeline and will be available soon. This upcoming feature will provide more control over how you document and present version changes in the changelog.

Will this create a new API version if there are breaking changes?

Theneo is designed to track changes meticulously. The functionality to automatically create a new API version upon detecting breaking changes is being developed. When released, it will allow users to manage versions more effectively and ensure that versioning reflects significant changes or updates.

<p>API versioning in Theneo is designed to be both intuitive and comprehensive, accommodating the natural evolution of your APIs. With Theneo, you can manage and track incremental changes within the same version using the API changelog, as well as create and oversee major version transitions such as moving from v1 to v2 or v3.</p><p>Theneo now offers a feature for comprehensive API version management. This feature enables users to meticulously handle different</p>

API versioning in Theneo is designed to be both intuitive and comprehensive, accommodating the natural evolution of your APIs. With Theneo, you can manage and track incremental changes within the same version using the API changelog, as well as create and oversee major version transitions such as moving from v1 to v2 or v3.

Theneo now offers a feature for comprehensive API version management. This feature enables users to meticulously handle different versions of their API, such as v2, v3, and beyond, each with unique statuses and configurations.

As this is a beta feature, Theneo invites users to activate API versioning by reaching out to us:

Once API versioning is enabled for your account, you can:

For more information on API versioning and to request access to this beta feature, please contact us at 

. We are committed to supporting you in leveraging this feature to its full potential, ensuring effective management of your API's lifecycle.

<p>A project in Theneo is a robust toolset that allows you to create and manage a wide array of technical content. This can range from API references, SDK documentation, product guides, and much more. Theneo provides an easy and streamlined way to generate API documentation from API collections, allowing you to focus on delivering high-quality, accurate, and up-to-date content.</p><p>To create your first projec</p>

A project in Theneo is a robust toolset that allows you to create and manage a wide array of technical content. This can range from API references, SDK documentation, product guides, and much more. Theneo provides an easy and streamlined way to generate API documentation from API collections, allowing you to focus on delivering high-quality, accurate, and up-to-date content.

To create your first project with Theneo:

Editing the generated content or adding new content is a breeze, thanks to Theneo’s intuitive, Notion-like editor. You can easily tweak API requests, methods, properties, descriptions, responses, and much more. 

Once you're satisfied with your API reference, the next step is to publish your project. However, it's always a good practice to preview your changes before hitting the publish button.

Here's how you can preview, publish, and share your project:

<p class="slate-p " >Theneo's web editor is a rich and intuitive platform, equipped with a variety of widgets that enrich the documentation experience. These widgets add depth and clarity to your API documentation, making it more engaging and informative. You can easily access these widgets by simply going to a new line in the editor and typing <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">/</strong></code></span>, which brings up the widget options. Let's take a look at the widgets available:</p><p class="slate-p " ></p><h4 class="slate-h4 " >General:</h4><p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Divider</strong></span>: A simple yet effective tool to create clear separations between sections, enhancing readability and structure.</p><p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Callout</strong></span>: Draws focus to important information, tips, or warnings, ensuring key messages are not missed.</p><p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Table</strong></span>: Ideal for presenting data or information systematically, making complex details easier to digest.</p><p class="slate-p " ></p><h4 class="slate-h4 " >Media:</h4><p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Image & Video</strong></span>: Brings your documentation to life with visual content like diagrams, screenshots, or explanatory videos, offering a richer understanding.</p><p class="slate-p " ></p><h4 class="slate-h4 " >API:</h4><p class="slate-p " ><strong class="slate-bold">API Management: </strong>Enables users to define API endpoints, manage request and response parameters, and configure essential details like data types, keys, values, and descriptions, ensuring accurate API setup and functionality.</p><p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Code Blocks</strong></span>: Perfect for displaying code snippets, helping users understand implementation details in different programming languages.</p><p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Object Example</strong></span>: Shows practical examples of objects used in your API, demystifying complex data structures for better comprehension.</p><p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Error Codes</strong></span>: Outlines potential errors that might occur, providing a guide for troubleshooting and error resolution.</p><p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Status Codes</strong></span>: Clarifies the HTTP status codes your API returns, giving insights into various responses and their meanings.</p><p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Base URL</strong></span>: Displays the base URL of your API prominently, a crucial starting point for users making API requests.</p><p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Language Box</strong></span>: Allows for multi-language documentation, offering code examples in various programming languages to cater to a diverse audience.</p><p class="slate-p " ><strong class="slate-bold">Endpoint Summary: </strong>Provides a concise overview of all API endpoints from different subsections in one place. It allows users to easily navigate to specific endpoints by clicking on them within the widget, offering a quick and seamless way to access detailed endpoint information.</p><p class="slate-p " >Each widget is tailored to enhance specific aspects of API documentation, making Theneo's web editor a versatile tool for developers and technical writers. As you proceed with documentation, these widgets can be seamlessly integrated to cater to your content needs, ensuring a comprehensive and user-friendly experience.</p><p class="slate-p " ></p>

Theneo's web editor is a rich and intuitive platform, equipped with a variety of widgets that enrich the documentation experience. These widgets add depth and clarity to your API documentation, making it more engaging and informative. You can easily access these widgets by simply going to a new line in the editor and typing 

, which brings up the widget options. Let's take a look at the widgets available:

: A simple yet effective tool to create clear separations between sections, enhancing readability and structure.

: Draws focus to important information, tips, or warnings, ensuring key messages are not missed.

: Ideal for presenting data or information systematically, making complex details easier to digest.

: Brings your documentation to life with visual content like diagrams, screenshots, or explanatory videos, offering a richer understanding.

Enables users to define API endpoints, manage request and response parameters, and configure essential details like data types, keys, values, and descriptions, ensuring accurate API setup and functionality.

: Perfect for displaying code snippets, helping users understand implementation details in different programming languages.

: Shows practical examples of objects used in your API, demystifying complex data structures for better comprehension.

: Outlines potential errors that might occur, providing a guide for troubleshooting and error resolution.

: Clarifies the HTTP status codes your API returns, giving insights into various responses and their meanings.

: Displays the base URL of your API prominently, a crucial starting point for users making API requests.

: Allows for multi-language documentation, offering code examples in various programming languages to cater to a diverse audience.

Provides a concise overview of all API endpoints from different subsections in one place. It allows users to easily navigate to specific endpoints by clicking on them within the widget, offering a quick and seamless way to access detailed endpoint information.

Each widget is tailored to enhance specific aspects of API documentation, making Theneo's web editor a versatile tool for developers and technical writers. As you proceed with documentation, these widgets can be seamlessly integrated to cater to your content needs, ensuring a comprehensive and user-friendly experience.

<h3 class="slate-h3 " >Frequently Asked Questions (FAQ) about the Theneo Editor</h3><h3 class="slate-h3 " >1. Can multiple people work on the editor at the same time?</h3><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Current Status</strong></span>: As of now, simultaneous editing by multiple users is not supported.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Future Plans</strong></span>: We are actively working on introducing live collaboration features. In the meantime, we recommend that only one person edit the content at a time to avoid conflicts.</div></li></ul><h3 class="slate-h3 " >2. What happens when I make changes to the API in Theneo and then import a new API spec?</h3><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Change Handling</strong></span>: When you import a new API spec, Theneo provides several options to merge these changes:</div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Merging</strong></span>: This logic identifies and imports only the new updates you've made.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Overwrite</strong></span>: Overwrites all existing content with the new spec.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Append</strong></span>: Adds the new API spec on top of the existing one, useful for combining different API specs.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Endpoints</strong></span>: Imports the spec into the 'Collections' tab, allowing you to drag and drop endpoints to your desired location in the documentation.</div></li></ul></li></ul><h3 class="slate-h3 " >3. Can I export the content I am working on, including API updates, from the editor?</h3><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Export Capability</strong></span>: Yes, you can export your work, including any API updates.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Export Format</strong></span>: As part of our growth package, you can export your documentation to a YAML file.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Repository Syncing</strong></span>: This exported file can then be synced with your repository for version control and collaboration.</div></li></ul><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

Frequently Asked Questions (FAQ) about the Theneo Editor

1. Can multiple people work on the editor at the same time?

2. What happens when I make changes to the API in Theneo and then import a new API spec?

3. Can I export the content I am working on, including API updates, from the editor?

<p class="slate-p " >The Divider widget in Theneo's web editor is a straightforward yet powerful tool for organizing your documentation. By inserting a visual line break, the Divider creates clear separation between sections, making your content easier to navigate and digest for the reader. It's an essential element for maintaining a clean and structured look in your documents.</p><p class="slate-p " >To add a Divider in Theneo's web editor:</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Navigate to the point in your text where you want to insert a break.</div></li><li class="slate-li " ><div style="position:relative">Type <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">/divider</strong></code></span> on a new line.</div></li><li class="slate-li " ><div style="position:relative">Select the Divider option that appears.</div></li></ol><p class="slate-p " ></p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " >The result is a horizontal line, as shown in your example, that neatly segments your content. This can be particularly useful for distinguishing between different topics, API endpoints, or logical sections within your documentation, ensuring that readers can easily follow along and find the information they need.</p><p class="slate-p " ></p><p class="slate-p " ></p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p><p class="slate-p " ></p>

The Divider widget in Theneo's web editor is a straightforward yet powerful tool for organizing your documentation. By inserting a visual line break, the Divider creates clear separation between sections, making your content easier to navigate and digest for the reader. It's an essential element for maintaining a clean and structured look in your documents.

The result is a horizontal line, as shown in your example, that neatly segments your content. This can be particularly useful for distinguishing between different topics, API endpoints, or logical sections within your documentation, ensuring that readers can easily follow along and find the information they need.

Divider

<p class="slate-p " >The Callout widget in Theneo's web editor serves as a great way to draw attention to specific pieces of information within your documentation. By providing visual cues, callouts can indicate important details, success messages, warnings, or errors, making them stand out from the rest of the text.</p><p class="slate-p " >Here's how to use the Callout widget:</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Click into the editor at the point where you want to insert a callout.</div></li><li class="slate-li " ><div style="position:relative">Type <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">/callout</strong></code></span> to bring up the widget selection.</div></li><li class="slate-li " ><div style="position:relative">Choose from one of the callout options: Info, Success, Warning, or Error.</div></li></ol><p class="slate-p " >Each callout type is color-coded and comes with an icon to quickly convey the message's nature:</p><p class="slate-p " ></p><div style="width:60%;
	min-width:60%;" data-type=info ><div ><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >Use this to provide additional information or explain a concept in more detail.</p></div></div><div style="width:60%;
	min-width:60%;" data-type=success ><div ><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.77116 10.8968L5.72949 8.8551C5.60449 8.7301 5.45171 8.6676 5.27116 8.6676C5.0906 8.6676 4.93088 8.73705 4.79199 8.87594C4.6531 9.01482 4.58366 9.17455 4.58366 9.3551C4.58366 9.53566 4.6531 9.68844 4.79199 9.81344L7.33366 12.3551C7.45866 12.4801 7.60449 12.5426 7.77116 12.5426C7.93783 12.5426 8.08366 12.4801 8.20866 12.3551L13.2087 7.3551C13.3337 7.2301 13.3927 7.07732 13.3857 6.89677C13.3788 6.71621 13.3128 6.56344 13.1878 6.43844C13.0628 6.29955 12.9066 6.2301 12.7191 6.2301C12.5316 6.2301 12.3684 6.29955 12.2295 6.43844L7.77116 10.8968ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C11.0142 16.0843 12.6982 15.4072 14.0524 14.053C15.4066 12.6989 16.0837 11.0148 16.0837 9.00094C16.0837 6.98705 15.4066 5.30302 14.0524 3.94885C12.6982 2.59469 11.0142 1.9176 9.00033 1.9176C6.98644 1.9176 5.30241 2.59469 3.94824 3.94885C2.59408 5.30302 1.91699 6.98705 1.91699 9.00094C1.91699 11.0148 2.59408 12.6989 3.94824 14.053C5.30241 15.4072 6.98644 16.0843 9.00033 16.0843Z" fill="#06837A"></path></svg></div><div ><p class="slate-p " >Ideal for indicating successful operations or validations.</p></div></div><div style="width:60%;
	min-width:60%;" data-type=warning ><div ><svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.916637 15.5009C0.791637 15.5009 0.683998 15.4732 0.59372 15.4176C0.503443 15.362 0.430526 15.2857 0.37497 15.1884C0.319415 15.0912 0.288165 14.9905 0.28122 14.8864C0.274276 14.7822 0.305526 14.6745 0.37497 14.5634L8.4583 0.605103C8.52775 0.493991 8.60761 0.41413 8.69789 0.365519C8.78816 0.316908 8.88886 0.292603 8.99997 0.292603C9.11108 0.292603 9.21178 0.316908 9.30205 0.365519C9.39233 0.41413 9.47219 0.493991 9.54164 0.605103L17.625 14.5634C17.6944 14.6745 17.7257 14.7822 17.7187 14.8864C17.7118 14.9905 17.6805 15.0912 17.625 15.1884C17.5694 15.2857 17.4965 15.362 17.4062 15.4176C17.3159 15.4732 17.2083 15.5009 17.0833 15.5009H0.916637ZM1.99997 14.2509H16L8.99997 2.1676L1.99997 14.2509ZM9.0833 13.0634C9.26386 13.0634 9.41316 13.0044 9.53122 12.8864C9.64928 12.7683 9.7083 12.619 9.7083 12.4384C9.7083 12.2579 9.64928 12.1086 9.53122 11.9905C9.41316 11.8725 9.26386 11.8134 9.0833 11.8134C8.90275 11.8134 8.75344 11.8725 8.63539 11.9905C8.51733 12.1086 8.4583 12.2579 8.4583 12.4384C8.4583 12.619 8.51733 12.7683 8.63539 12.8864C8.75344 13.0044 8.90275 13.0634 9.0833 13.0634ZM9.0833 10.7509C9.26386 10.7509 9.41316 10.6919 9.53122 10.5739C9.64928 10.4558 9.7083 10.3065 9.7083 10.1259V6.70927C9.7083 6.52871 9.64928 6.37941 9.53122 6.26135C9.41316 6.1433 9.26386 6.08427 9.0833 6.08427C8.90275 6.08427 8.75344 6.1433 8.63539 6.26135C8.51733 6.37941 8.4583 6.52871 8.4583 6.70927V10.1259C8.4583 10.3065 8.51733 10.4558 8.63539 10.5739C8.75344 10.6919 8.90275 10.7509 9.0833 10.7509Z" fill="#F1C21B"></path></svg></div><div ><p class="slate-p " >Highlights potential issues or important considerations that users should be aware of.</p></div></div><div style="width:60%;
	min-width:60%;" data-type=error ><div ><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.08366 9.9801C9.25033 9.9801 9.39269 9.92107 9.51074 9.80302C9.6288 9.68496 9.68783 9.53566 9.68783 9.3551V5.31344C9.68783 5.14677 9.62533 5.00441 9.50033 4.88635C9.37533 4.7683 9.22949 4.70927 9.06283 4.70927C8.88227 4.70927 8.73296 4.7683 8.61491 4.88635C8.49685 5.00441 8.43783 5.15371 8.43783 5.33427V9.37594C8.43783 9.5426 8.50033 9.68496 8.62533 9.80302C8.75033 9.92107 8.9031 9.9801 9.08366 9.9801ZM9.00033 13.1676C9.19477 13.1676 9.35796 13.1016 9.48991 12.9697C9.62185 12.8377 9.68783 12.6745 9.68783 12.4801C9.68783 12.2857 9.62185 12.1225 9.48991 11.9905C9.35796 11.8586 9.19477 11.7926 9.00033 11.7926C8.80588 11.7926 8.64269 11.8586 8.51074 11.9905C8.3788 12.1225 8.31283 12.2857 8.31283 12.4801C8.31283 12.6745 8.3788 12.8377 8.51074 12.9697C8.64269 13.1016 8.80588 13.1676 9.00033 13.1676ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C10.9448 16.0843 12.6114 15.3898 14.0003 14.0009C15.3892 12.612 16.0837 10.9454 16.0837 9.00094C16.0837 7.05649 15.3892 5.38982 14.0003 4.00094C12.6114 2.61205 10.9448 1.9176 9.00033 1.9176C7.05588 1.9176 5.38921 2.61205 4.00033 4.00094C2.61144 5.38982 1.91699 7.05649 1.91699 9.00094C1.91699 10.9454 2.61144 12.612 4.00033 14.0009C5.38921 15.3898 7.05588 16.0843 9.00033 16.0843Z" fill="#E90005"></path></svg></div><div ><p class="slate-p " >Signifies critical errors or problems that need immediate attention.</p></div></div><p class="slate-p " >All of the Callout elements can be branded in our branding configuration</p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

The Callout widget in Theneo's web editor serves as a great way to draw attention to specific pieces of information within your documentation. By providing visual cues, callouts can indicate important details, success messages, warnings, or errors, making them stand out from the rest of the text.

Each callout type is color-coded and comes with an icon to quickly convey the message's nature:

All of the Callout elements can be branded in our branding configuration

Callout

<p class="slate-p " >The Table widget in Theneo&apos;s web editor is a straightforward and effective way to organize and present data in a tabular format. Tables are essential for displaying structured data, comparison charts, specifications, and more, making complex information easy to digest.</p><p class="slate-p " >Here&apos;s how to insert a table into your documentation:</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Position your cursor in the editor where you want the table to be.</div></li><li class="slate-li " ><div style="position:relative">Type <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">/table</strong></code></span> on a new line to bring up the widget menu.</div></li><li class="slate-li " ><div style="position:relative">Select the Table widget.</div></li></ol><p class="slate-p " >Once you&apos;ve inserted a table, you can:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Add or remove columns and rows to suit your data.</div></li><li class="slate-li " ><div style="position:relative">Click into any cell to start typing your content.</div></li><li class="slate-li " ><div style="position:relative">Use the toolbar options to format text within the table, align content, or add/remove additional rows and columns.</div></li></ul><p class="slate-p " ></p><div class="table-container" style="width:98%;
  min-width:98%;"><table class="slate-table" ><div class="published-table-header" style="width:100%;min-width:100%"><div style="width:23%">Feature</div><div style="width:32%">Description</div><div style="width:0%">Available</div></div><colgroup ><col style="width:22.84263959390863%"><col style="width:31.53553299492386%"><col style="width:0%"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Authentication</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Secure user login with OAuth2.0</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Yes</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Rate Limiting</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Limits the number of requests per hour</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Yes</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Data Export</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Ability to export data in various formats</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >No</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Real-time Updates</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Provides live updates without refreshing</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Yes</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Multi-Language Support</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Documentation available in multiple languages</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Coming Soon</p></td></div></tr></tbody></table></div><p class="slate-p " >The simplicity of the Table widget ensures that your data is presented cleanly and clearly, with no distractions, allowing readers to focus on the content itself. Whether you&apos;re summarizing endpoint parameters, listing error codes, or comparing different API versions, the table is an invaluable tool for your documentation needs.</p><p class="slate-p " ></p>

The Table widget in Theneo's web editor is a straightforward and effective way to organize and present data in a tabular format. Tables are essential for displaying structured data, comparison charts, specifications, and more, making complex information easy to digest.

Here's how to insert a table into your documentation:

Feature

Description

Available

The simplicity of the Table widget ensures that your data is presented cleanly and clearly, with no distractions, allowing readers to focus on the content itself. Whether you're summarizing endpoint parameters, listing error codes, or comparing different API versions, the table is an invaluable tool for your documentation needs.

Table

<p class="slate-p " >The <strong class="slate-bold">Steps</strong> widget allows users to create a structured sequence of steps, making it easier to outline processes or instructions in a clear, step-by-step format.</p><p class="slate-p " ></p><h3 class="slate-h3 " >Benefits of Using the Steps Widget</h3><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Clarity and Structure</strong>: The Steps widget organizes information in a way that is easy to follow, helping users understand complex processes or instructions.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Multimedia Support</strong>: Each step can include various types of content, such as images, videos, and tables.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Flexibility</strong>: Users can add, delete, and duplicate steps as needed, allowing for easy adjustments to content.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Highlight Important Information</strong>: The option to add callouts and dividers helps emphasize critical points, ensuring that essential details are not overlooked.</div></li></ul><p class="slate-p " ></p><h3 class="slate-h3 " >How to Add a Steps Widget</h3><p class="slate-p " ></p><div class="steps-widget" style="width:100%;
  	min-width:100%;"><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >1</h6><h3 class="slate-h3 " >First Step</h3><p class="slate-p " >Navigate to the point in your text where you want to insert the Steps widget.</p></div></div><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >2</h6><h3 class="slate-h3 " >Second Step</h3><p class="slate-p " >Type <code class="slate-code">/Steps</code> on a new line.</p><div style="text-align:left"><a href="https://theneo-prod-public.s3.us-east-1.amazonaws.com/4e4ab6be-c9c7-4ae3-8f93-91e0f762aa9b.png" target="_blank" rel="noreferrer"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/4e4ab6be-c9c7-4ae3-8f93-91e0f762aa9b.png" style="width:415px;
	  height:400px;
	  aspect-ratio:415 / 400" /></a></div></div></div><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >3</h6><h3 class="slate-h3 " >Third Step</h3><p class="slate-p " >Select the Steps option that appears.</p><p class="slate-p " ></p></div></div></div><p class="slate-p " ></p><p class="slate-p " ></p><h3 class="slate-h3 " >Default State</h3><p class="slate-p " >When the Steps widget is first added, only the first step appears by default. A <strong class="slate-bold">"+"</strong> icon will be visible, allowing you to add additional steps easily.</p><p class="slate-p " ></p><h3 class="slate-h3 " >Step Management</h3><p class="slate-p " >The Steps widget offers flexible management options, allowing users to customize each step with titles, multimedia content, and easy-to-use tools for organizing and editing steps efficiently.</p><p class="slate-p " ></p><h4 class="slate-h4 " >Add Title</h4><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Each step has the option to add a title, providing a brief description or heading for that step.</div></li></ul><p class="slate-p " ></p><h4 class="slate-h4 " >Content Addition</h4><p class="slate-p " >Users can add various types of content to each step, including:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Basic Text Content</strong>: Support for basic text formatting (bold, italics, bullet points, etc.).</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Callout</strong>: Add a callout box to highlight important information within a step.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Table</strong>: Insert a table for structured data.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Image</strong>: Upload or insert images to illustrate the step.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Video</strong>: Embed video content relevant to the step.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Code Block</strong>: Add code blocks with syntax highlighting for technical instructions.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Card: </strong>Encapsulate content within a styled container for emphasis or organization.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Divider</strong>: Insert a horizontal divider to visually separate content within the step.</div></li></ul><p class="slate-p " ></p><h4 class="slate-h4 " >Step Navigation and Editing</h4><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Add Step</strong>: Click the <strong class="slate-bold">"+"</strong> icon to add a new step below the existing steps.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Delete Step</strong>:</div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">An option to delete an individual step will be displayed as a trash icon on hover above each step's number.</div></li><li class="slate-li " ><div style="position:relative">You can also delete a step using the keyboard: select the entire step you want to delete and press the <strong class="slate-bold">Delete</strong> key.</div></li></ul></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Delete Widget</strong>: Users can delete the entire Steps widget, which will remove all steps and their content from the document.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Duplicate Widget</strong>: Easily duplicate the entire Steps widget to reuse content or create a similar sequence of steps.</div></li></ul><p class="slate-p " ></p>

 widget allows users to create a structured sequence of steps, making it easier to outline processes or instructions in a clear, step-by-step format.

When the Steps widget is first added, only the first step appears by default. A 

 icon will be visible, allowing you to add additional steps easily.

The Steps widget offers flexible management options, allowing users to customize each step with titles, multimedia content, and easy-to-use tools for organizing and editing steps efficiently.

Users can add various types of content to each step, including:

Steps

<h4 class="slate-h4 " >Encapsulate content within a styled container for emphasis or organization.</h4><p class="slate-p " ></p><a href="https://app.theneo.io/theneo/quickstart/editor/web-editor-widgets/image-and-video" target="_top" class=card-anchor><div class=card-box style="width:60%; min-width:540px;"><img src=https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f680.png class=card-icon></img><div ><h3 class="slate-h3 " >Card Title</h3><p class="slate-p " >This is how the card widget appears, with an icon, title and link. Clicking on this card will take you to the Image &amp; Video section.</p></div></div></a><p class="slate-p " ></p><h3 class="slate-h3 " >How to Add the Card Widget:</h3><p class="slate-p " ></p><div class="steps-widget" style="width:100%;
  	min-width:100%;"><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >1</h6><h3 class="slate-h3 " >First Step</h3><p class="slate-p " >Navigate to the point in your text where you want to insert the Card widget.</p></div></div><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >2</h6><h3 class="slate-h3 " >Second Step</h3><p class="slate-p " >Type <code class="slate-code">/Card</code> on a new line.</p></div></div><div class="steps-wrapper"><div class="steps-content"><h6 class="slate-h6 " >3</h6><h3 class="slate-h3 " >Third Step</h3><p class="slate-p " >Select the Card option that appears.</p></div></div></div><p class="slate-p " ></p><p class="slate-p " ></p><h3 class="slate-h3 " ></h3><h4 class="slate-h4 " >Content Addition</h4><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Users can add brief description to the card.</div></li><li class="slate-li " ><div style="position:relative">The content support all styling options, such as text formatting (bold, italics, bullet points, etc.).</div></li></ul><h4 class="slate-h4 " >Add Link</h4><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">The entire card widget is clickable.</div></li><li class="slate-li " ><div style="position:relative">Users can add a URL to the card, making the whole card act as a hyperlink. The insert link option is available in the three-dot menu.</div></li></ul><h4 class="slate-h4 " >Icons</h4><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Users can add icons to the card to enhance visual appeal.</div></li><li class="slate-li " ><div style="position:relative">Three options are available:</div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Emojis</div></li><li class="slate-li " ><div style="position:relative">Suggested icons</div></li><li class="slate-li " ><div style="position:relative">Option to upload custom icons</div></li></ul></li></ul><h4 class="slate-h4 " >Duplicate Card</h4><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Users have the option to duplicate the entire card along with its content via the three-dot menu.</div></li><li class="slate-li " ><div style="position:relative">The duplicated card will maintain all the properties of the original card.</div></li></ul><h4 class="slate-h4 " >Delete Card</h4><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Users can delete the card through the three-dot menu.</div></li></ul><p class="slate-p " ></p>

Encapsulate content within a styled container for emphasis or organization.

Card

<p class="slate-p " >The Image & Video widgets in Theneo's web editor allow you to seamlessly integrate multimedia elements into your API documentation.</p><h3 class="slate-h3 " >Image Widget</h3><p class="slate-p " >To add an image:</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Place your cursor in the editor where you want the image to appear.</div></li><li class="slate-li " ><div style="position:relative">Type <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">/image</strong></code></span> to activate the widget menu.</div></li><li class="slate-li " ><div style="position:relative">Choose to upload your image file directly or insert it via URL.</div></li></ol><p class="slate-p " ></p><div style="text-align:center"><a href="https://theneo-prod-public.s3.us-east-1.amazonaws.com/89e82426-4a2c-48e7-938f-1c84b266ab9a.png" target="_blank" rel="noreferrer"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/89e82426-4a2c-48e7-938f-1c84b266ab9a.png" style="width:952px;
	  height:635px;
	  aspect-ratio:952 / 635" /></a></div><h3 class="slate-h3 " >
Video Widget</h3><p class="slate-p " >To add a video:</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Place your cursor in the editor where you want the video to appear.</div></li><li class="slate-li " ><div style="position:relative">Type <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">/video</strong></code></span> to activate the widget menu.</div></li><li class="slate-li " ><div style="position:relative">Paste the URL of the video you wish to embed. The editor typically supports video content from major hosting platforms such as YouTube and Vimeo.</div></li></ol><div style="text-align:center"><iframe
                        title="embed"
                        frameBorder="0"
                        allowFullScreen=""
                        src="https://player.vimeo.com/video/275588279"
                        id="275588279"
                        provider="vimeo"
                        class="slate-MediaEmbedElement-iframe"
                        width="62.880710659898476%"
                    ></iframe></div><p class="slate-p " ></p><p class="slate-p " ></p>

The Image & Video widgets in Theneo's web editor allow you to seamlessly integrate multimedia elements into your API documentation.

Image & Video

<p class="slate-p " >The API Management widget allows users to efficiently define, configure, and manage API endpoints within their projects. It offers a structured way to input and manage essential information for request and response parameters, ensuring comprehensive API setup.</p><h4 class="slate-h4 " >How to Add and Configure the API Management Widget</h4><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Insert the Widget</strong>: To insert the API Management Widget, navigate to the desired section in your documentation. Type <code class="slate-code">/</code> to bring up the widget menu and select <strong class="slate-bold">API Management</strong>.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Configure the HTTP Method</strong>: Click on the method dropdown in the widget’s header to select an HTTP method (e.g., POST, PUT, PATCH, DELETE).</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Define the Endpoint Path</strong>: Enter the endpoint path next to the HTTP method, which will be appended to the base URL. Press the <strong class="slate-bold">Save Changes</strong> button or hit <strong class="slate-bold">Enter</strong> to save.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Detail Request Specifications</strong>:</div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Headers</strong>: Add headers such as content type or authorization tokens.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Parameters</strong>: Input query parameters or path variables required by the endpoint.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Body</strong>: For methods like POST or PUT, specify the request body structure.</div></li></ul></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Form and Code Views</strong>: Switch between:</div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Form View</strong>: A user-friendly interface for entering request details.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Code View</strong>: For scripting or pasting raw data.</div></li></ul></li></ol><p class="slate-p " ></p><h4 class="slate-h4 " >Configuring the Response</h4><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Add the Response Widget: </strong>Navigate to the <strong class="slate-bold">Response</strong> tab within the API Management widget. Click the "Add Response" button, which will trigger the response widget to appear.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Add Response Codes</strong>: By default, a 200 OK response is included. Add other response codes by clicking the <strong class="slate-bold">+</strong> icon.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Detail the Response</strong>:</div><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Form View</strong>: Add descriptions and structure the returned data.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Code View</strong>: Paste in JSON or other formatted responses, and the widget will parse them for easy reading.</div></li></ol></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Multiple Responses</strong>: Document responses for various status codes (e.g., 200 OK, 400 Bad Request, 500 Internal Server Error) to cover different API outcomes.</div></li></ol><p class="slate-p " ></p><h4 class="slate-h4 " >Additional Configuration Options</h4><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Parameter Properties</strong>: Click the icon in the right corner of each parameter to trigger a modal for adding extra properties.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Required Parameters</strong>: Mark parameters as required using a asterisk icon.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Parameter Actions</strong>: Use the three-dot menu to delete or duplicate parameters.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Ask AI</strong>: Use AI to suggest descriptions for each parameter by clicking the "Ask AI" button in the description field.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Code Beautify</strong>: Use the beautify button to format code in code view.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Full Screen Mode</strong>: Use the full-screen option in the header to manage endpoints more easily.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">More Actions Menu</strong>: The three-dot menu includes options to delete the entire API management section or hide descriptions for request and response parameters in the published view.</div></li></ul><p class="slate-p " ></p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div ><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p slate-indent-0" style="0px">If you prefer a cleaner look, use the three-dot menu to hide the description column on the left. This can make the published documentation appear more streamlined.</p></div></div><p class="slate-p " >For a demo purposes you can see how we auto populate fields (below) and API request and response (on the right side)</p>

The API Management widget allows users to efficiently define, configure, and manage API endpoints within their projects. It offers a structured way to input and manage essential information for request and response parameters, ensuring comprehensive API setup.

How to Add and Configure the API Management Widget

For a demo purposes you can see how we auto populate fields (below) and API request and response (on the right side)

API Management

The name of the project being created or updated.

project_name

The type of project being created, such as 'web development', 'app development', or 'design'.

project_type

The name of the project owner who is responsible for the project.

project_owner

The authorization token required for accessing the API endpoint.

Authorization

created

description

email

invoice_prefix

invoice_settings

next_invoice_sequence

phone

data

message

test

<p class="slate-p " >The Theneo web editor's Code Block widget allows you to easily insert code snippets into your documentation. Syntax highlighting is supported for a wide range of programming languages, making your code snippets clear and easy to understand.</p><p class="slate-p " >To insert a code snippet:</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Navigate to a new line in the Theneo web editor where you want the code block to appear.</div></li><li class="slate-li " ><div style="position:relative">Type <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">/code</strong></code></span> to trigger the widget selection menu.</div></li><li class="slate-li " ><div style="position:relative">Choose 'Code Block' from the list of widgets.</div></li><li class="slate-li " ><div style="position:relative">Select the programming language from the drop-down menu to apply syntax highlighting.</div></li><li class="slate-li " ><div style="position:relative">Paste or type your code into the code block.</div></li></ol><p class="slate-p " >Here's an example of a formatted code snippet in JavaScript:</p><div class="code-block-wrapper" style="width:60%"><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line">// Theneo API Magic Elixir Mixer</div><div class="slate-code_line">function createElixir(elixirName, ingredients) {
console.log(Creating ${elixirName} Elixir with the following ingredients:);
ingredients.forEach((ingredient, index) => {
console.log(${index + 1}. ${ingredient});
});
console.log(${elixirName} Elixir is ready to empower your API!);
}</div><div class="slate-code_line">// Mix a 'Restful Rejuvenation' elixir for your API
createElixir('Restful Rejuvenation', ['REST', 'JSON', 'OAuth 2.0', 'CORS']);</div><div class="slate-code_line"></div></code></pre></div><p class="slate-p " ></p><p class="slate-p " ></p>

The Theneo web editor's Code Block widget allows you to easily insert code snippets into your documentation. Syntax highlighting is supported for a wide range of programming languages, making your code snippets clear and easy to understand.

Here's an example of a formatted code snippet in JavaScript:

Code Blocks

String representing the object’s type. Objects of the same type share the same value.

object

address

The current balance, if any, that’s stored on the customer. If negative, the customer has credit to apply to their next invoice. If positive, the customer has an amount owed that’s added to their next invoice. The balance only considers amounts that Stripe hasn’t successfully applied to any invoice. It doesn’t reflect unpaid invoices. This balance is only taken into account after invoices finalize.

balance

Time at which the object was created. Measured in seconds since the Unix epoch.

Three-letter ISO code for the currency the customer can be charged in for recurring billing purposes.

currency

ID of the default payment source for the customer.

default_source

Tracks the most recent state change on any invoice belonging to the customer. Paying an invoice or marking it uncollectible via the API will set this field to false. An automatic payment failure or passing the invoice.due_date will set this field to true.

delinquent

Describes the current discount active on the customer, if there is one.

discount

livemode

metadata

name

preferred_locales

shipping

tax_exempt

test_clock

Jenny Rosen

Customer Object Demo

<p class="slate-p " >The Object Example widget in Theneo's web editor is a versatile tool that enhances the documentation of API objects. It provides a structured and interactive way to present and explain the different components of an API object. Here's how you can use this widget effectively:</p><h3 class="slate-h3 " >Adding an Object Example</h3><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Position your cursor where you want to insert the object example in your documentation.</div></li><li class="slate-li " ><div style="position:relative">Type <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">/object example</strong></code></span> to bring up the widget menu and select the Object Example widget.</div></li><li class="slate-li " ><div style="position:relative">A new tab will be created where you can define your object example.</div></li></ol><h3 class="slate-h3 " >Working with Object Examples</h3><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Code View</strong></span>: This view allows you to input raw JSON or other supported formats directly. The editor will parse and display the data in an organized and readable format.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Form View</strong></span>: Here, you can add more detailed information about each field of your object, such as whether the field is required, provide descriptions, and set additional properties like minimum or maximum values.</div></li></ul><h3 class="slate-h3 " >Managing Multiple Object Examples</h3><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">You can create multiple tabs for different object examples as needed, allowing you to document various objects within the same context.</div></li><li class="slate-li " ><div style="position:relative">Switch between tabs to manage or view different examples.</div></li></ul><h3 class="slate-h3 " >Supported Languages</h3><p class="slate-p " >The Object Example widget supports the same languages as the code block highlight feature, providing consistency in how code and objects are presented throughout your documentation.</p><h3 class="slate-h3 " >Extended Use Case</h3><p class="slate-p " ></p><div style="width:60%;
	min-width:60%;" data-type=info ><div ><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >Interestingly, some customers have creatively used the Object Example widget for code snippet highlights, taking advantage of the tab feature to organize and display multiple code examples side-by-side.</p></div></div><p class="slate-p " >This widget is just another way Theneo empowers you to create comprehensive and user-friendly documentation, making complex API objects understandable at a glance.</p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

The Object Example widget in Theneo's web editor is a versatile tool that enhances the documentation of API objects. It provides a structured and interactive way to present and explain the different components of an API object. Here's how you can use this widget effectively:

The Object Example widget supports the same languages as the code block highlight feature, providing consistency in how code and objects are presented throughout your documentation.

This widget is just another way Theneo empowers you to create comprehensive and user-friendly documentation, making complex API objects understandable at a glance.

Object example

<p class="slate-p " >The Error Codes widget in Theneo's web editor is a specialized tool for documenting the different types of errors that can occur while using an API. This widget helps to organize and present error information clearly, so developers and users can quickly understand and troubleshoot issues when they arise. Here's how you can effectively use this widget:</p><p class="slate-p " ></p><h3 class="slate-h3 " >Utilizing the Error Codes Widget</h3><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Insert the Widget</strong></span>: Go to the desired section in your document, start a new line, type <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">/error codes</strong></code></span>, and select the Error Codes widget from the dropdown.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Add Error Details</strong></span>: For each error, click on the <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">Add</strong></code></span> button to create a new entry. Fill in the details such as:</div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">The type of error (e.g., <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">authentication_error</strong></code></span>, <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">rate_limit_error</strong></code></span>, etc.)</div></li><li class="slate-li " ><div style="position:relative">A concise yet comprehensive description that explains when this error might be encountered.</div></li></ul></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Reorder Errors</strong></span>: If you want to prioritize certain errors or arrange them in a particular order, use the up and down arrows to move them within the list.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Edit or Delete Errors</strong></span>: Should you need to update an error's details or remove it from your documentation, click on the edit icon to modify the information or the trash can icon to delete the entry.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Clarity and Actionability</strong></span>: Ensure that each error type has a clear name and description. Where applicable, provide actionable steps users can take to resolve the error.</div></li></ol><p class="slate-p slate-indent-0" style="0px">Remember, the Error Codes widget is designed to help users understand specific errors related to your API's functionality, separate from the general HTTP status codes which are managed with the Status Codes widget. Using this widget enhances the usability of your API documentation by making error handling clearer and more accessible.</p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

The Error Codes widget in Theneo's web editor is a specialized tool for documenting the different types of errors that can occur while using an API. This widget helps to organize and present error information clearly, so developers and users can quickly understand and troubleshoot issues when they arise. Here's how you can effectively use this widget:

Remember, the Error Codes widget is designed to help users understand specific errors related to your API's functionality, separate from the general HTTP status codes which are managed with the Status Codes widget. Using this widget enhances the usability of your API documentation by making error handling clearer and more accessible.

api_connection_error

API errors cover any other type of problem (e.g., a temporary problem with servers), and are extremely uncommon.

api_error

Failure to properly authenticate yourself in the request.

authentication_error

Card errors are the most common type of error you should expect to handle. They result when the user enters a card that can't be charged for some reason.

card_error

Idempotency errors occur when an Idempotency-Key is re-used on a request that does not match the first request's API endpoint and parameters.

idempotency_error

Invalid request errors arise when your request has invalid parameters.

invalid_request_error

Too many requests hit the API too quickly.

rate_limit_error

Errors triggered by our client-side libraries when failing to validate fields (e.g., when a card number or expiration date is invalid or incomplete).

validation_error

Error codes

<p class="slate-p " >The Status Codes widget in Theneo's web editor is a feature that allows you to document the HTTP status codes that your API might return. This helps users understand the responses they receive from your API. Here's a guide to using this widget effectively:</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Insert the Widget</strong></span>: Navigate to the section in your documentation where you want to list the status codes. Start a new line, type <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">/status codes</strong></code></span>, and select the Status Codes widget from the dropdown menu.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Add Status Codes</strong></span>: Use the <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">Add</strong></code></span> button to insert new entries for each status code your API uses. For each status code, provide:</div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">The status code number (e.g., <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">200</strong></code></span>, <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">400</strong></code></span>, <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">404</strong></code></span>, etc.).</div></li><li class="slate-li " ><div style="position:relative">A brief title for the status code (e.g., <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">OK</strong></code></span>, <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">Bad Request</strong></code></span>, <span style="color:var(--tw-prose-code)"><code class="slate-code"><strong class="slate-bold">Not Found</strong></code></span>).</div></li><li class="slate-li " ><div style="position:relative">A clear description explaining when this status code is returned and what it signifies.</div></li></ul></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Utilize the Library</strong></span>: As you type the status code, you'll notice that Theneo's library suggests existing status codes as a reference. This helps maintain consistency and accuracy in your documentation.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Organize and Edit</strong></span>: You can reorder the status codes using the up and down arrows to match the flow of your documentation or delete any unnecessary status code entries using the trash icon.</div></li><li class="slate-li " ><div style="position:relative"><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Completeness</strong></span>: Ensure you document all status codes that your API might return, including success and error responses, to provide comprehensive documentation.</div></li></ol><p class="slate-p " ></p><p class="slate-p " ></p>

The Status Codes widget in Theneo's web editor is a feature that allows you to document the HTTP status codes that your API might return. This helps users understand the responses they receive from your API. Here's a guide to using this widget effectively: