diff --git a/docs/data/toolpad/core/components/page-container/page-container.md b/docs/data/toolpad/core/components/page-container/page-container.md index 7562b355251..e8b37a36f8b 100644 --- a/docs/data/toolpad/core/components/page-container/page-container.md +++ b/docs/data/toolpad/core/components/page-container/page-container.md @@ -47,7 +47,7 @@ The breadcrumbs contains **ACME / Home / Orders** when you visit the path **/hom {{"demo": "TitleBreadcrumbsPageContainer.js", "height": 300, "hideToolbar": true}} -## Dynamic Routes +## Dynamic routes When you use the `PageContainer` on a dynamic route, you'll likely want to set a title and breadcrumbs belonging to the specific path. You can achieve this with the `title` and `breadcrumbs` property of the `PageContainer` diff --git a/docs/data/toolpad/core/components/persistent-state/persistent-state.md b/docs/data/toolpad/core/components/persistent-state/persistent-state.md index 7fe9549b123..73cf8fb6b09 100644 --- a/docs/data/toolpad/core/components/persistent-state/persistent-state.md +++ b/docs/data/toolpad/core/components/persistent-state/persistent-state.md @@ -47,11 +47,11 @@ For complex data types you can pair these hooks with a typed validation library {{"demo": "LocalStorageStateZod.js"}} -## Session Storage +## Session storage The `useSessionStorageState` hook works identical to the [`useLocalStorageState`](#local-storage) hook, except that it reads and writes from `window.sessionStorage` instead of `window.localStorage`. -## Search Parameters +## Search parameters 🚧 Coming soon diff --git a/docs/data/toolpad/core/introduction/base-concepts.md b/docs/data/toolpad/core/introduction/base-concepts.md index 96409572c4a..663456e5c3a 100644 --- a/docs/data/toolpad/core/introduction/base-concepts.md +++ b/docs/data/toolpad/core/introduction/base-concepts.md @@ -15,7 +15,7 @@ import Button from '@mui/material/Button'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; ``` -## Component Hierarchy +## Component hierarchy The Toolpad Core library is designed to work under different React runtimes such as Next.js, Vite, or even your custom setup. Many of its components rely on functionality of the specific runtime they are used under. The key component in making the components runtime-aware is the `AppProvider`. @@ -106,6 +106,6 @@ In this example: - The `slots` prop allows you to replace entire parts of the component. - The `slotProps` prop lets you pass additional props to specific slots. -## Next Steps +## Next steps Now that you understand the basic concepts of Toolpad Core, you're ready to start integrating it into your project. Head over to the [integration docs](/toolpad/core/introduction/integration/) to learn more. diff --git a/docs/data/toolpad/core/introduction/examples.md b/docs/data/toolpad/core/introduction/examples.md index 352bfe44129..40cdc04abb8 100644 --- a/docs/data/toolpad/core/introduction/examples.md +++ b/docs/data/toolpad/core/introduction/examples.md @@ -5,7 +5,7 @@ title: Examples # Toolpad Core - Examples -
Browse a collection of Toolpad Core examples to help you get started quickly:
+Browse a collection of Toolpad Core examples to help you get started quickly.
diff --git a/docs/data/toolpad/core/introduction/installation.md b/docs/data/toolpad/core/introduction/installation.md index 973e9ffa4f4..eb3d0f598d9 100644 --- a/docs/data/toolpad/core/introduction/installation.md +++ b/docs/data/toolpad/core/introduction/installation.md @@ -4,24 +4,26 @@ title: Toolpad Core - Installation # Installation -## Manual Installation +Learn how to install Toolpad Core in your local environment.
+ +## Manual installation Use your preferred package manager to install `@toolpad/core` in your project:Learn how to install Toolpad Core in your local environment.
+## Automatic installation 1. Run the following command to start Toolpad Core: diff --git a/docs/data/toolpad/core/introduction/integration.md b/docs/data/toolpad/core/introduction/integration.md index 0fea00e98ee..2f362fe6dea 100644 --- a/docs/data/toolpad/core/introduction/integration.md +++ b/docs/data/toolpad/core/introduction/integration.md @@ -12,17 +12,17 @@ This guide will walk you through the process of adding Toolpad Core to an existiToolpad Studio's accessibility to the file-system makes it powerful. Here's how:
+Toolpad Studio's accessibility to the file-system makes it powerful. Here's how.
Toolpad Studio is file-system based, which means that an app's entire configuration is stored in files within your project. You can inspect and edit them from your IDE. You'll also use your own tools to author custom functions and components. This is how the project structure looks like in the file-system: diff --git a/docs/data/toolpad/studio/getting-started/installation.md b/docs/data/toolpad/studio/getting-started/installation.md index c177d3ff2f5..57c9c909d38 100644 --- a/docs/data/toolpad/studio/getting-started/installation.md +++ b/docs/data/toolpad/studio/getting-started/installation.md @@ -13,14 +13,14 @@ Then run the command: npx create-toolpad-app@latest --studio my-toolpad-app ``` -```bash yarn -yarn create toolpad-app --studio my-toolpad-app -``` - ```bash pnpm pnpm create toolpad-app --studio my-toolpad-app ``` +```bash yarn +yarn create toolpad-app --studio my-toolpad-app +``` + This will run the `create-toolpad-app` CLI which initializes the directory `./my-toolpad-app` with a Toolpad Studio application. @@ -41,14 +41,14 @@ Then start the development mode npm run dev ``` -```bash yarn -yarn dev -``` - ```bash pnpm pnpm dev ``` +```bash yarn +yarn dev +``` + This starts the development server on port `3000` or the first available port after that and opens the browser to the Toolpad Studio editor. @@ -60,17 +60,17 @@ Start by installing the required dependencies:Toolpad Studio docs
+Toolpad Studio docs.
Low code tool, for developers, powered by MUI.