/* Note core colors
    "primary": "#1488fc",
    "light": "#1488fc",
    "dark": "#2BA6FF"
    pale blue #D8F1FF
*/

:root {
  --button-bg: white;
}

.bolt-inline-image {
  display: inline;
  margin: 0;
}

/* soften the links */
.link {
  font-weight: 300;
}

.bolt-help-center-logo-link {
  border-left: 1px solid rgb(159 162 166);
  font-size: 1em;
  font-weight: 400;
  padding-left: 1em;
}

/* make left nav have same background as rest of page */
#sidebar-content {
  background: none;
}

.mint-text-center {
    text-align: center
}
.mint-text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity))
}
.dark\:mint-text-gray-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity))
}

// Utility function to get parents
function getParentNode(element, position) {
    if (!element || position === 0) return element;
    return getParentNode(element.parentNode, position - 1);
}

// --- Add Help Center link adjacent to logo ---

// Create the new element
const helpCenterLink = document.createElement("a");
const helpCenterLinkText = document.createTextNode("Help Center");
helpCenterLink.appendChild(helpCenterLinkText);
helpCenterLink.setAttribute("href", "https://support.bolt.new/");
helpCenterLink.setAttribute("class", "bolt-help-center-logo-link")

// Get the element to attach to
// The selector should be safe: https://mintlify.com/docs/settings/custom-scripts#using-identifiers-and-selectors
const defaultLogo = document.getElementsByClassName('nav-logo')[0];
// This is not so safe, if the theme DOM changes
const logoContainer = getParentNode(defaultLogo, 2);

// And append
logoContainer.appendChild(helpCenterLink);




Welcome

Welcome to Bolt

Bolt

What is Bolt, how does it work, and resources to use Bolt effectively.

Introduction to Bolt

Introduction to LLMs

The lifecyle of an app, and how to work through it with Bolt.

Build your first app

Supported technologies

Information on best practices and optimizations

Overview

Best practices

Optimize token usage to keep your costs down

Maximize token efficiency

Prompt effectively

Use Discussion Mode in Bolt to get help without immediately generating code

In-app help with discussion mode

Bolt integrates directly with Figma to import designs and generate

Figma for design

Using Supabase with Bolt to add a database, authentication, or edge functions to your app.

Supabase for databases

Bolt integrates directly with Stripe to handle user payments and subscriptions.

Stripe for payments

Use Netlify to deploy and host your Bolt projects.

Netlify for hosting

Using Bolt with Expo to create mobile apps and deploy them to app stores.

Expo for mobile apps

Bolt integrates directly with GitHub, handling all commit and update operations automatically.

Building with Bolt

Best practices

Using Bolt with other tools

Accounts and subscriptions

Troubleshooting

Community and support

Welcome to Bolt

Get started with Bolt

Introduction to Bolt

Best practices

Integrations

Community