[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore atoms overlay in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overview)

[Badge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-badge)

[Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-button)

[Checkbox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-checkbox)

[Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-icon)

[Input](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-input)

[Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-label)

[Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-link)

[List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-list)

[Loader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-loader)

[Overlay](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay)

[Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-price)

[Radio](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-radio)

[Select](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-select)

[SROnly](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-sr-only)

[Skeleton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-skeleton)

[Slider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-slider)

[Textarea](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-textarea)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/molecules-overview)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overview)

[Badge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-badge)

[Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-button)

[Checkbox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-checkbox)

[Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-icon)

[Input](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-input)

[Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-label)

[Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-link)

[List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-list)

[Loader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-loader)

[Overlay](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay)

[Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-price)

[Radio](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-radio)

[Select](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-select)

[SROnly](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-sr-only)

[Skeleton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-skeleton)

[Slider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-slider)

[Textarea](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-textarea)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/molecules-overview)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overview)

Overlay

Overlays provide contextual information on top of the current layer of the interface.

[ Source code](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/components/src/atoms/Overlay)

Overlays provide contextual information on top of the current layer of the interface. They can be interruptive like modals or augmenting like popovers and tooltips.

Example

Code

A content outside me

---

## Usage

### Import the component

`1

import { Overlay } from '@faststore/ui'

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import '@faststore/ui/src/components/atoms/Overlay/styles.scss';

`

For details, see [Importing FastStore UI component styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles).

---

## Design tokens

| Local token             | Default value/Global token linked |
| ----------------------- | --------------------------------- |
| \--fs-overlay-bkg-color | rgb(0 0 0 / 20%)                  |

---

## Data attributes

You can target and override `Overlay` styles using the following data attributes:

`data-fs-overlay`

---

## Props

| Name       | Type   | Description                                                                            | Default    |
| ---------- | ------ | -------------------------------------------------------------------------------------- | ---------- |
| **testId** | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-overlay |

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62757720%3Fv%3D4%26w=64%26q=75)](https://github.com/aliceoq)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/atoms/overlay.mdx)

[Loader« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-loader)[PriceNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-price)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62757720%3Fv%3D4%26w=64%26q=75)](https://github.com/aliceoq)

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23import-styles)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23design-tokens)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23props)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/atoms/overlay.mdx)

Copy page

On this page

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23import-styles)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23design-tokens)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overlay/docs/guides/faststore/atoms-overlay%23props)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides using the docs builder to publish app documentation in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-getting-started)

---

Project structure

[Manifest](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-manifest)

[Billing Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-billing-options)

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-builders)

[Admin Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-admin-builder)

[Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-assets-builder)

[Docs Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-docs-builder)

[GraphQL Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-graphql-builder)

[Messages Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-messages-builder)

[Node Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-node-builder)

[PaymentProvider Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-paymentprovider-builder)

[Pixel Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-pixel-builder)

[React Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-react-builder)

[Store Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-store-builder)

[Styles Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-styles-builder)

[Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-dependencies)

[Peer Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-peerdependencies)

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-getting-started)

---

Project structure

[Manifest](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-manifest)

[Billing Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-billing-options)

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-builders)

[Admin Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-admin-builder)

[Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-assets-builder)

[Docs Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-docs-builder)

[GraphQL Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-graphql-builder)

[Messages Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-messages-builder)

[Node Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-node-builder)

[PaymentProvider Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-paymentprovider-builder)

[Pixel Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-pixel-builder)

[React Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-react-builder)

[Store Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-store-builder)

[Styles Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-styles-builder)

[Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-dependencies)

[Peer Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-peerdependencies)

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/app-development)

Project structure

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-builders)

[Docs Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-docs-builder)

Docs builder

Learn how to use the VTEX IO Docs builder.

The `docs` builder is used to publicly publish an app's documentation on the [VTEX Developer Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/), allowing users to access relevant information about your app. Once the app is [published](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app), all Markdown content within the `docs` folder becomes available in the VTEX Developer Portal.

The content will be available in a URL of the following format:

`1

https://developers.vtex.com/docs/apps/{appvendor}.{appname}@{appversion}

`

Any app developer can make their documentation publicly available using the docs builder. So even if your app is not published to the VTEX App Store, you can take advantage of this convenience.

> When using the `docs` builder, ensure no sensitive or private information is shared in the files under the `/docs` folder.

## Folder structure

An app that uses the `docs` builder has a folder named `/docs` in its root directory. This folder serves as the repository for the application's documentation, where all documentation files are written in [Markdown](https://read.calvincode.net/reader?url=https://www.markdownguide.org/basic-syntax/) format (\*.md files).

Following, you can find the basic app’s folder structure of an app using this builder:

`1

docs

2

 ┣ 📄 README.md

`

The `README.md` is the main documentation file, where comprehensive information about the app is documented using Markdown syntax.

In addition to the README.md, developers can provide supplementary guides in separate Markdown files. For instance, an additional guide named `OptionalSteps.md` can be included to offer additional instructions or insights.

Each documentation file, including the README.md and any supplementary guides, can be accessed via unique URLs within the VTEX Developer Portal. For example, the `README.md` is accessible at `https://developers.vtex.com/docs/apps/{appvendor}.{appname}@{appversion}`, while supplementary guides like `OptionalSteps.md` can be accessed at `https://developers.vtex.com/docs/apps/{appvendor}.{appname}@{appversion}/OptionalSteps`.

## Usage

To begin using the `docs` builder in your app development, follow these steps.

1. Add the `docs` builder to your app’s builder list in the `manifest.json` file, as the following:

`1

"builders": {

2

 "docs": "0.x"

3

}

`

1. In the root directory of your app, create a `/docs` folder to manage your app’s documentation.
2. [Publish](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app) and [deploy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-deploying-the-app-stable-version) your new app version.
3. Once you publish your app, the documentation will be available in the VTEX Developer Portal.

> **Versioning**: Each app version will have its own documentation available at `https://developers.vtex.com/docs/apps/{appvendor}.{appname}@{appversion}`, while accessing `https://developers.vtex.com/docs/apps/{appvendor}.{appname}` will direct users to the latest version.

## Use case examples

The `docs` builder plays a crucial role in making an app’s documentation accessible. As a best practice, it is recommended that an app include at least the `README.md` file within the `/docs` folder.

As an example, check the [folder structure](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/locale-switcher/tree/master/docs) of this builder in the Locale Switcher app and its [public documentation in the Developer Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.locale-switcher).

For further guidance on structuring your app's documentation, refer to [Documentation guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-docs-guidelines).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/concepts/vtex-io-documentation-builders/vtex-io-documentation-docs-builder.md)

[Assets Builder« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation//docs/guides/vtex-io-documentation-assets-builder)[GraphQL BuilderNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation//docs/guides/vtex-io-documentation-graphql-builder)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Folder structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-docs-builder%23folder-structure)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-docs-builder%23usage)

[Use case examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-docs-builder%23use-case-examples)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/concepts/vtex-io-documentation-builders/vtex-io-documentation-docs-builder.md)

Copy page

On this page

ON THIS PAGE

[Folder structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-docs-builder%23folder-structure)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-docs-builder%23usage)

[Use case examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-the-docs-builder-to-publish-app-documentation/docs/guides/vtex-io-documentation-docs-builder%23use-case-examples)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)