Interface overview

The Web Studio keeps the same frame in every view: the top bar, the Explorer on the left, the view itself in the middle and a settings bar at the bottom. The screenshot shows the Metric view; the Domain and Dependencies views put their own content into the same frame.

#	Control	What it does
1	Load cc.json files	Opens one or several maps. See Loading maps.
2	Map selector	Picks which of the loaded maps are shown. See Loading maps.
3	View tabs	Metric, Domain, Dependencies. A tab appears only when the map carries data for it. See Views.
4	Mode bar	Point at a view tab or this handle to drop down Explore, Compare and 3D Print. See Views.
5	Settings	Opens the Global Configuration dialog. See Settings.
6	Explorer counters	SHOWN, FLATTENED, EXCLUDED. Click the last two to manage their rules. See Explorer.
7	Search and ⋮ menu	Search with .gitignore-style patterns; the ⋮ menu turns a pattern or a metric condition into a rule. See Explorer.
8	Sort	Orders the tree by Name, Number of Files or Area Size.
9	File tree	Folders and files of the map, each with its share of the area metric and its number of files.
10	Code map	Hover, click, double-click or right-click a building. See The code map.
11	Viewcube	Snaps the camera to a side, edge or corner view. See Map tools and viewcube.
12	Zoom slider	Zooms the map; the current zoom is shown below it.
13	Layout	Names the map layout and switches between the five layouts. See Map layouts.
14	Map tools	Center map, Flashlight, Screenshot, and Unfocus while a folder is focused. See Map tools.
15	Area	The metric behind each building’s footprint. See Metric bar.
16	Height	The metric behind each building’s height. See Metric bar.
17	Link	Ties height and color to the same metric. See Metric bar.
18	Color	The metric behind each building’s color. See Metric bar.
19	Edges	Shown when the map carries edges: the edge metric and its settings. See Metric bar.
20	Labels	Which buildings get a label. See Labels.
21	Scenarios	Saves and applies sets of settings. See Scenarios.
22	Legend	Opens the LEGEND panel. See Legend.
23	Distribution bar	How the area metric splits across file extensions. See Distribution bar.
24	Bottom bar	The path of the file or folder under the pointer on the left, the CodeCharta version on the right.

Clicking a building or a folder opens the Inspector on the right, with every metric of that node. All keyboard and mouse shortcuts are listed on Keyboard and mouse shortcuts.