Skip to content

Commit

Permalink
feat: Improve readability of devbox template instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
filipelima18 committed Dec 20, 2023
1 parent 98e22d3 commit 9e307e5
Showing 1 changed file with 15 additions and 15 deletions.
30 changes: 15 additions & 15 deletions packages/projects-docs/pages/learn/devboxes/templates.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@ import { Callout } from 'nextra-theme-docs'
## What are Templates?

Templates are starting points for development environments that you create through CodeSandbox. When you pick a template, you create a fork of the original project. Forked templates are already set up with the
configuration, file structure and dependencies installed. So you don't have to
configuration, file structure and installed dependencies. So you don't have to
spend time doing this each time you begin working on something new. They
are easily accessible from the ["Create" modal](https://codesandbox.io/s).

From the modal, CodeSandbox offers several official templates for several different programming languages.

You can also create your own custom templates from your projects. So you can fully customize your development start points for your particular use-case and preferences. Once a custom
You can also create your own custom templates from your projects. So you can fully customize your development start points for your particular use case and preferences. Once a custom
template has been created, you can use it to start new projects through the ["Create" modal](https://codesandbox.io/s). Custom templates can also be added
to workspaces, so workspace members can make use of them. Any custom templates that you have access too can be found in the [Templates folder](https://codesandbox.io/dashboard/templates) on the Dashboard or under 'Workspace Templates' within the modal.
to workspaces so workspace members can use them. Any custom templates you can access can be found in the [Templates folder](https://codesandbox.io/dashboard/templates) on the Dashboard or under 'Workspace Templates' within the modal.

## How to make a custom template

There are a few ways to create a template, but the main way is from within the
"Devbox Info" panel inside the editor. When viewing one of your Devboxes,
expand the "Devbox Info" panel on the left. You will then see an edit icon in line with the "Devbox Info" header Just click the icon and then check the 'Template' box in the settings pane that opens on the right of the interface.
expand the "Devbox Info" panel on the left. You will then see an edit icon in line with the "Devbox Info" header. Click the icon and then check the 'Template' box in the settings pane that opens on the right of the interface.

<Callout>
You can also rename and set a description for the template from this interface. As well as configure the template privacy options.
Expand All @@ -37,12 +37,12 @@ Private and Unlisted Templates are only available for Pro subscribers

![Make Template from Devbox](../images/devbox-info-pane.png)

You can also create templates from the dashboard. You can do this by either dragging and dropping a Devbox from
any folder into ["Templates"](https://codesandbox.io/dashboard/templates). Or using the right click menu and selecting
`Make Devbox a Template`.
You can also create templates from the Dashboard. You can do this by either dragging and dropping a Devbox from
any folder into ["Templates"](https://codesandbox.io/dashboard/templates) or using the right-click menu and selecting
_Make Devbox a Template_.

<Callout>
The Templates folder will not appear until you have created your first custom template.
The Templates folder will only appear once you have created your first custom template.
</Callout>

import Image from 'next/image'
Expand All @@ -57,22 +57,22 @@ import gif2 from '../images/template-3.gif'

## Using Templates

After you've made your first custom template, there's a few places from which
you can access and use them. First, inside of the "Create a Devbox" modal,
you will see a list of your templates under `Workspace Templates`. Clicking on one of
After you've made your first custom template, there are a few places from which
you can access and use them. First, inside the "Create a Devbox" modal,
you will see a list of your templates under _Workspace Templates_. Clicking on one of
these will fork the template and open it in the editor.

![Sandbox Modal](../images/devbox-template-modal.png)

You can also find all of your templates under the [Templates folder](https://codesandbox.io/dashboard/templates) on the
Dashboard. Clicking on any of the templates shown inside this folder will open
You can also find all your templates under the [Templates folder](https://codesandbox.io/dashboard/templates) on the
Dashboard. Clicking on any of the templates in this folder will open
it in the editor.

## Editing Templates

When you first create a template it will be fully editable to allow you to quickly make any required changes.
Once you're happy with the template, just open up the 'Template Info' settings using the instructions above.
Then check 'Frozen' and reload the page to prevent further changes.
Once you're happy with the template, open up the 'Template Info' settings using the instructions above.
Then, check 'Frozen' and reload the page to prevent further changes.
In order to make further changes to a template, you just need to uncheck 'Frozen' and reload the page again.
Any time you try to save a change to a frozen template, it will automatically fork into a new environment.

Expand Down

0 comments on commit 9e307e5

Please sign in to comment.