meta: path: /getting-started name: Getting Started desc: Learn how to create documentation pages with markdown and Python type: documentation format: toon/3.3 context: 7-page Dash docs site relatedPages[5]: Home: / AI/LLM Integration: /examples/ai-integration Custom Directives: /examples/directives Data Visualization: /examples/visualization Interactive .md: /examples/interactive sections[20]: 1. [3] Introduction Welcome to the Dash Documentation Boilerplate! This guide will teach you how to create beautiful, interactive documentation pages using markdown and Python. The boilerplate uses a **markdown-driven approach** where you write documentation in `. 2. [4] Step 1: Create a Folder Create a new folder in the `docs/` directory for your component or feature: ```bash mkdir -p docs/my-component 3. [4] Step 2: Create a Markdown File Create a markdown file with **frontmatter metadata** at the top: ```markdown --- 4. [2] My Component 5. [5] Frontmatter Fields - **name** (required): Display name in the navigation - **description** (required): Short description for SEO and navigation - **endpoint** (required): URL path for the page (e.g., `/components/my-component`) 6. [4] Step 3: Write Your Content Use standard markdown syntax for your documentation: ```markdown 7. [2] Features This component provides: - Feature 1 - Feature 2 8. [3] Usage Here's how to use it: \`\`\`python import dash_mantine_components as dmc 9. [3] Advanced Examples More detailed examples below... ``` That's it! The page will automatically appear in the navigation when you restart the server. 10. [3] Using Custom Directives > The boilerplate provides powerful **custom directives** to enhance your documentation: 11. [4] Table of Contents - .. toc:: Automatically generate a table of contents from your headings: ```markdown .. toc:: 12. [3] Section 1 13. [3] Section 2 14. [4] Execute Python Components - .. exec:: Embed interactive Dash components from Python modules: ```markdown ``` 15. [4] Display Source Code - .. source:: Show syntax-highlighted source code: ```markdown ``` 16. [4] Component Props - .. kwargs:: Auto-generate a props documentation table: ```markdown ``` 17. [3] Directive Options The custom directives support **options** that control how content is displayed. Options are specified using a colon syntax after the directive. 18. [5] Option: code false - Hide Source Code Display Use with `.. exec::` to show only the rendered component without the code: ```markdown ``` 19. [5] Option: defaultExpanded false - Collapse Code by Default Use with `.. source::` to show code in a collapsed state initially: ```markdown ``` 20. [5] Option: withExpandedButton true - Add Expand/Collapse Button Use with `.. source::` to add an interactive expand/collapse button: ```markdown ``` directives: llms_copy: [Getting Started] toc: [(none)] exec[8]: docs.my-component.example, docs.data-visualization.basic_chart, ... source[8]: docs/my-component/example.py, docs/data-visualization/basic_chart.py, ... kwargs: [dmc.Button, dmc.MyComponent, MyComponent] execComponents[8]: - docs.my-component.example - docs.data-visualization.basic_chart [callback] - docs.components.advanced-example - docs.components.my-component.demo - docs.example.introduction [callback] - docs.my-component.basic-example - docs.my-component.advanced-example - docs.my-component.callbacks-example codeExamples[2]: 1: file: docs/data-visualization/basic_chart.py lang: python code: | from dash import dcc, callback, Input, Output import dash_mantine_components as dmc import pandas as pd import plotly.express as px # Register Mantine templates dmc.add_figure_templates(default="mantine_light") # Sample data df = pd.DataFrame({ "Category": ["Product A", "Product B", "Product C", "Product D", "Product E"], "Sales": [120, 95, 180, 140, 165] }) # Create initial figure fig = px.bar( df, x="Category", y="Sales", title="Product Sales Comparison", # ... (42 more lines) 2: file: docs/example/introduction.py lang: python code: | from dash import Dash, dcc, html, Input, Output, callback import dash_mantine_components as dmc import pandas as pd import plotly.express as px # Import mark_important to highlight key elements for AI/LLMs try: from dash_improve_my_llms import mark_important except ImportError: # Fallback if package not installed def mark_important(component, component_id=None): return component # Register Mantine templates dmc.add_figure_templates(default="mantine_light") # Sample data df1 = pd.DataFrame({ "Fruit": ["Apples", "Oranges", "Bananas", "Grapes"], "Amount": [4, 1, 2, 2] # ... (36 more lines) tables[1]: 1. [Feature|Support] Markdown|✅ Python|✅ Callbacks|✅ keyLists[5]: - unordered: **name** (required): Display name in the navigation, **description** (required): Short description for SEO and na..., **endpoint** (required): URL path for the page (e.g., `/comp..., **package** (optional): Package name for organization, **icon** (optional): Material Design icon (from [Iconify](ht... - unordered: Feature 1, Feature 2, Feature 3 - unordered: ✅ You want to show the interactive demo without cluttering t..., ✅ The code will be shown separately with `.. source::`, ✅ The example is self-explanatory and code isn't needed inli... - unordered: ✅ Long source files that might overwhelm the page, ✅ Optional/advanced code that users can view if interested, ✅ Multiple code examples on one page - unordered: ✅ Combined with `:defaultExpanded: false` for collapsible co..., ✅ Giving users control over viewing source code, ✅ Keeping documentation clean while making code accessible tips[4]: Basic Example: [python] from dash import html, dcc... Example with Callbacks: [python] from dash import html, dcc, callback, Input, Output... Code Blocks: [python] def hello_world():... Code Blocks: [javascript] function helloWorld() {... resources[1]: - External link: https://dash.plotly.com/ summary: Getting Started: | 20 sections | 2 code examples | 4 tips | 1 tables | 1 resources | uses exec, kwargs, llms_copy, source, toc | 2 interactive components