--- title: "Testing Customizations with .dev" description: "Customize the look and feel of your docs without breaking anything in production with .dev." url: "https://support.helpdocs.io/article/159uaio6oz-testing-customizations-with-dot-dev" category: "Customizing your HelpDocs" updated_at: "2025-05-02T12:30:00Z" --- # Testing Customizations with .dev Knowledge Bases look best when they're customized to fit your brand and style. Luckily HelpDocs has [a ton of customization options](/category/7V3torYegy-customizing-your-help-docs) to change the look and feel of your docs 🦄✨ While big changes to the look and feel of your docs are super fun they can also be kinda stressful. Especially if your docs are already live to customers. Breaking things in production's never fun 😭 `.dev` gives you a way to preview changes to some of your Knowledge Base settings (especially custom code) without making those changes live to users right away. You can create custom HTML templates or test out CSS and JavaScript without impacting your users. Then when it's perfect you can ship your changes all at once 🎉 This article is only relevant if you have the `.dev` feature on [your HelpDocs plan](https://www.helpdocs.io/pricing) ### Making non-live changes with .dev There's two places in **Settings** you can make changes to your code without affecting your live Knowledge Base: - **Settings** > **Brand** - **Settings** > **Code** In areas where you're able to use `.dev` you'll see an **Enable .dev** button in the navigation. If a setting is part of `.dev` we'll highlight that with a little badge or a callout with a descriptive message. Any changes you make to settings *without* a badge or callout will affect the live version of your docs. [Embedded iframe](https://player.vimeo.com/video/1080806798) 1. Choose the Settings you'd like to change 1. Head to **Settings** > **Brand** for Brand changes 2. **Settings** > **Code** for Code changes 2. Click **Enable .dev** 3. Make any changes you want to areas marked as part of `.dev` ### Promoting .dev changes to the live version Fixed that pesky CSS issue? ✅ Got your template looking *just so*? ✅ You're ready to go live! Once you're happy with the changes you've made using `.dev` you'll need to promote the changes to your live Knowledge Base. Only then will they be visible to your users. Don't worry there's no need to copy/paste things here. You can promote all your changes at once with a couple clicks. [Embedded iframe](https://player.vimeo.com/video/1080807832) 1. Click the dropdown on the .dev button menu 2. Select **Promote .dev changes to live version** 3. Read the warning. I know your changes are awesome. I know you probably hate warnings. But it's useful I promise 👀 Promoting your changes from `.dev` to your live Knowledge Base will overwrite all live settings that're part of `.dev` with the staging versions you've been working on. This includes any fields of `.dev`'able settings that you've left empty. Be sure you really wanna do this before you move forward. 4. Hit **Save Changes** #### Restoring .dev from live version You can populate `.dev` with all your live Knowledge Base settings in a couple clicks. This is especially useful when you're just getting started with `.dev` or if you've made any terrible errors with your customizations (happens to the best of us 😩). Here's how 👇 [Embedded iframe](https://player.vimeo.com/video/1080810611) 1. Click the dropdown on the .dev button menu 2. Choose **Restore .dev from live version** 3. Read this warning too. I know you probably learned from the warning before. And you're excited to make your changes. I know warnings *still* kinda suck. But it's there for your protection 👷 This will permanently overwrite your `.dev` changes with settings from your live Knowledge Base. Once you hit Save we can't recover your old `.dev` changes. 4. Hit **Save Changes** ### Previewing changes on your .dev subdomain The whole point of `.dev` is so you can see your changes without pushing them live. But *how* do you see them? With our handy **Preview .dev changes** button of course! [Embedded iframe](https://player.vimeo.com/video/1080824004) 1. Click the **Preview** button on the .dev button group 2. You'll be taken to `.helpdocs.dev` where you'll see all your articles and categories as normal *plus* all the settings changes you've made with `.dev` 🎉 #### .dev subdomain visibility Using `.dev` will not [affect your SEO](/article/51ZpxHK9Uj-optimizing-your-seo) or confuse users with multiple copies of content on the internet. It's a preview area that's only accessible by certain members of your team that have access to HelpDocs Settings. Specifically only members of your HelpDocs team that're [Administrators](/article/CaKSeF9kSP-managing-users) and above can view changes made with `.dev`. And it can only be accessed through **Settings**.