--- description: Display Wrangler config in TOML and JSON tabs. title: WranglerConfig image: https://developers.cloudflare.com/style-guide/build-the-page/components/wrangler-config/og.png?v=931455c5f28f2ee5 --- [Skip to content](#main-content) > Documentation Index > Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt > Use this file to discover all available pages before exploring further. # WranglerConfig Last updated Sep 23, 2026|Copy as Markdown| [View as Markdown](https://developers.cloudflare.com/style-guide/build-the-page/components/wrangler-config/index.md)| [Agent setup](https://developers.cloudflare.com/agent-setup/) The `WranglerConfig` component is used `748` times on `430` pages.

See all examples of pages that use WranglerConfig

This component can be used to automatically generate a `jsonc` version of the `toml` file (or vice versa) of the Cloudflare [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). ## Import ```mdx import { WranglerConfig } from "~/components"; ``` ## Usage ````mdx import { WranglerConfig } from "~/components"; ```toml [[d1_databases]] binding = "DB" # available in your Worker on env.DB database_name = "prod-d1-tutorial" database_id = "" ``` ```` ## Cloudflare CLI configuration Use `cfConfig` to provide a reviewed `cloudflare.config.ts` equivalent. Supplying this prop displays the shared CLI selector. ````mdx import { WranglerConfig } from "~/components"; ```jsonc { "name": "my-worker" } ``` ```` ## Compatibility date You should generally use `$today` for the `compatibility_date` value for new projects. This magic string is automatically replaced with the current date at build time, ensuring documentation always suggests the latest date. When `$today` is used, the component also automatically injects a comment above the `compatibility_date` line (for example, `# Set this to today's date` in TOML and `// Set this to today's date` in JSONC) so that readers know to keep the value current. If you need to specify a fixed date, you can do so as well, but you may miss out on the latest features and performance improvements. You can disable specific features by using [compatibility flags](https://developers.cloudflare.com/workers/configuration/compatibility-flags/). ````mdx import { WranglerConfig } from "~/components"; ```jsonc { "name": "my-worker", "compatibility_date": "$today" } ``` ```` ### Minimum compatibility dates Some features require a minimum compatibility date. When documenting these features, use a `:::note` component to communicate the requirement clearly on the docs page: ```mdx :::note This feature requires a `compatibility_date` of `2024-09-23` or later. ::: ``` Note This feature requires a `compatibility_date` of `2024-09-23` or later. The `removeSchema` prop can be used to remove the `$schema` reference from the generated JSON file. This can be useful if you want to add snippets of configuration files that are easier to copy paste, and are providing toml as the source config format. If you provide jsonc as the source config format, the `removeSchema` prop will be ignored. ````mdx import { WranglerConfig } from "~/components"; ```toml [[d1_databases]] binding = "DB" # available in your Worker on env.DB database_name = "prod-d1-tutorial" database_id = "" ``` ```` Was this helpful? YesNo ## On this page [![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/) ```json {"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/build-the-page/components/wrangler-config/#page","headline":"WranglerConfig","description":"Display Wrangler config in TOML and JSON tabs.","url":"https://developers.cloudflare.com/style-guide/build-the-page/components/wrangler-config/","inLanguage":"en","image":"https://developers.cloudflare.com/style-guide/build-the-page/components/wrangler-config/og.png?v=931455c5f28f2ee5","dateModified":"2026-09-23","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}} ```