The globals.json shares the same initial structure as skeleton.json and serves as a globally defined resource. Its primary purpose is to manage common data across all routes, functioning like globally defined head elements or a centralized classroom array.
{ "head": { "title": "New Candy Wrapper project", "link": [ { "rel": "stylesheet", "href": "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap", "type": "text/css" } ], "meta": [ { "name": "viewport", "content": "width=device-width, initial-scale=1.0" }, { "charset": "UTF-8" }, { "name": "description", "content": "New Candy Wrapper project." }, { "name": "keywords", "content": "" } ] }, "classroom": [ { "name": "@view-transition", "type": "custom", "style": "navigation: auto;" } ], "const": { "section": { "title": "Learn to code by watching others", "description": "See how experienced developers solve problems in real-time. Watching scripted tutorials is great, but understanding how developers think is invaluable." }, "inputs": [ { "id": "first-name", "autocomplete": "given-name", "pattern": "^[a-zA-Z\\s]+$" }, { "id": "second-name", "autocomplete": "family-name", "pattern": "^[a-zA-Z\\s]+$" }, { "id": "email", "autocomplete": "email", "pattern": "^[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.[a-zA-Z]{2,}$" }, { "id": "password", "autocomplete": "password" } ] } }
One addition here to the regular skeleton.json is the const key. The const key allows you to declare globally accessible data across all routes. Above example is from Intro component with sign-up form.