You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: CodeSandbox allows you to create custom templates from sandboxes
4
+
description: Use templates to kickstart new projects with no setup.
5
5
---
6
6
7
7
## What are Templates?
8
8
9
-
Templates are sandboxes that are easily accessible from your dashboard and the
10
-
"Create New Sandbox" modal. They are great starting points for new projects.
11
-
CodeSandbox has a number of official templates, such as React, Vue, Gatsby and
12
-
others which you can use to quickly bootstrap a new project.
9
+
Templates are project starting points. They're already setup with the configuration, file structure, and dependencies installed, so you don't have to spend time doing this each time you begin working on something new. Templates are easily accessible from your dashboard and the "Create New Sandbox" modal.
13
10
14
-
Users can also create their own custom templates, whereby they can modify an
15
-
existing template with their own dependencies, files and folder structure, and
16
-
configuration. Once a custom template has been created, the user can then start
17
-
new projects from the "Create New Sandbox" modal using one of their templates.
11
+
CodeSandbox has a number of official templates, such as React, Vue, Angular, Gatsby, and
12
+
others that you can use to quickly start a new project.
13
+
14
+
You can also create your own custom templates. Turn any sandbox into a template that's customized for your particular use-case and preferences. Once a custom template has been created, you can then start
15
+
new projects from the "Create New Sandbox" modal using one of your templates. Custom templates can also be added to teams, so team members can make use of them.
18
16
19
17
## How to make a custom template
20
18
21
-
There are a few ways to make a template, but the primary way to do so is from
22
-
within the "Project Info" panel inside the editor. When viewing one of your
23
-
sandboxes, you'll see a button at the bottom of the "Project Info" panel that
24
-
says `Make Template`. Clicking on this will convert the sandbox to a template,
25
-
which will freeze it and make it available inside of the "Create New Sandbox"
19
+
There are a few ways to make a template, but the main way is from
20
+
within the "Sandbox Info" panel inside the editor. When viewing one of your
21
+
sandboxes, you'll see a button at the bottom of the "Sandbox Info" panel that
22
+
says `Save as template`. Clicking this will convert the sandbox to a template,
23
+
which will freeze it and make it available from the "Create New Sandbox"
26
24
modal.
27
25
28
-

26
+

29
27
30
28
Optionally, from the dashboard, you can either drag and drop a sandbox from
31
29
"Overview" or one of your folders under "My Sandboxes" to the new "My Templates"
@@ -38,49 +36,34 @@ folder. There is also an option within the sandbox options menu to
38
36
39
37
## Using Templates
40
38
41
-
After you've made your first template, there's a few places from which you can
39
+
After you've made your first custom template, there's a few places from which you can
42
40
access and use them. First, inside of the "Create New Sandbox" modal, you will
43
-
see a horizontal list of your templates inside of the `Overview` tab, and all of
44
-
your templates will appear under the `My Templates` tab. Clicking on one of
45
-
these will open the template inside the editor, where you will be prompted to
46
-
fork the sandbox as soon as you attempt to save changes.
47
-
48
-

41
+
see a list of your templates under `My Templates`. Clicking on one of
42
+
these will fork the template and open it in the editor.
49
43
50
-
You can also find all of your templates under the `My Templates` folder within
51
-
the Dashboard. Just as with the "Create New Sandbox" modal, clicking on any of
52
-
the templates shown inside this folder will open a new sandbox.
44
+

53
45
54
-

46
+
You can also find all of your templates under the `Templates` folder within
47
+
the Dashboard. Clicking on any of the templates shown inside this folder will open it in the editor.
55
48
56
49
## Editing Templates
57
50
58
-
Templates are frozen upon creation, preventing users from accidentally making
59
-
changes to the template when they mean to use a template to create a new sandbox
60
-
instead. In order to make changes to a template, simply unfreeze if from the
61
-
"Project Info" panel. Any time you try to make a change to a frozen template, a
62
-
modal will prompt you whether or not you would like to fork the template or
63
-
unfreeze it for the current session.
51
+
Templates are frozen upon creation, preventing you from accidentally making
52
+
changes to it. In order to make changes to a template, unfreeze it from the
53
+
"Sandbox Info" panel. Any time you try to make a change to a frozen template, a
54
+
modal will prompt you to fork the template or unfreeze it for the current session.
64
55
65
-

66
-

67
-
68
-
Any changes you make to an unfrozen Template are saved immediately. There is no
69
-
need to explicitly freeze an unfrozen template, as it will automatically be
70
-
frozen again upon navigating away from the editor or the current sandbox session
71
-
ends.
56
+
Any changes you make to an unfrozen Template are saved immediately. You don't need to freeze it again as it is automatically frozen again when you navigate away from the editor or finish the current sandbox session.
72
57
73
58
## Deleting Templates
74
59
75
-
There are a few ways in which you can "delete" a template. From the "Project
60
+
There are a few ways in which you can "delete" a template. From the "Sandbox
76
61
Info" panel inside the editor, there is a `Delete Template` button at the bottom
77
62
when viewing an existing template. Clicking this will convert the template back
78
63
to a regular sandbox, removing it from the "Create New Sandbox" modal and moving
79
64
back to the "Overview" and "My Sandboxes" folders inside the dashboard.
80
65
81
-

82
-
83
66
Alternatively, you can use a template's options menu inside the "My Templates"
84
67
folder to select `Convert to Sandbox`.
85
68
86
-

69
+

0 commit comments