Read and analyze a .bsdesign file to get a complete project overview.

This tool parses Bootstrap Studio design files (gzip-compressed JSON) and returns a comprehensive summary including theme, pages, assets, collections, and project settings.

Args:

• file_path (string): Absolute path to the .bsdesign file

Returns: Project overview with name, version, theme, bootstrap version, page list, assets (CSS, JS, images, fonts), and collections.

List all pages in a .bsdesign file with their metadata and component counts.

Args:

• file_path (string): Absolute path to the .bsdesign file

Returns: List of pages with name, export status, component count, and nested page structure.

Get the complete component tree for a specific page in a .bsdesign file.

This tool shows the full nesting structure of Bootstrap Studio components on a page, including component types, labels, Bootstrap CSS classes, and text content.

Args:

• file_path (string): Absolute path to the .bsdesign file

• page_name (string, optional): Name of the page (e.g. "index.html"). If omitted, returns the first page.

• max_depth (number, optional): Maximum nesting depth to display. Default: 10.

Returns: Component tree with type, label, text, Bootstrap classes, depth, and path for each component.

Search for components in a .bsdesign file by type, label, or text content.

Use this to locate specific elements across all pages in your Bootstrap Studio project. Supports partial matching.

Args:

• file_path (string): Absolute path to the .bsdesign file

• query (string): Search term to find

• search_in (enum, optional): Where to search - "all", "type", "label", or "text". Default: "all"

• page_name (string, optional): Limit search to a specific page. Default: all pages.

Returns: List of matching components with type, label, text, path, and page name.

Extract all custom CSS/SASS files and their content from a .bsdesign file.

Bootstrap Studio stores custom styles in the assets.css section. This tool retrieves them so you can review or modify them.

Args:

• file_path (string): Absolute path to the .bsdesign file

• file_name (string, optional): Get a specific CSS file by name. If omitted, returns all CSS files.

Returns: CSS file names and their content blocks.

Extract all custom JS files and their content from a .bsdesign file.

Bootstrap Studio stores custom scripts in the assets.js section. This tool retrieves them.

Args:

• file_path (string): Absolute path to the .bsdesign file

• file_name (string, optional): Get a specific JS file by name. If omitted, returns all JS files.

Returns: JS file names and their content blocks.

Extract all visible text content from a page in a .bsdesign file.

Useful for reviewing copy, checking placeholder text, or auditing content.

Args:

• file_path (string): Absolute path to the .bsdesign file

• page_name (string, optional): Page name. If omitted, first page is used.

Returns: All text content found on the page.

Generate ready-to-use Bootstrap 5 component HTML that can be pasted into Bootstrap Studio's Custom Code panel.

Generates production-quality HTML for common Bootstrap components with proper attributes and structure.

Available components: accordion, alert, badge, breadcrumb, card, carousel, contact-form, faq, features, footer, form, hero, modal, navbar, pricing, progress, spinner, stats, table, testimonial, timeline

Args:

• component (string): Component type to generate

• description (string, optional): Context/comments about the component's purpose

Returns: Formatted HTML string for the requested component.

Generate a complete Bootstrap 5 page layout structure that can be pasted into Bootstrap Studio.

Available layouts: dashboard, full-page

Args:

• layout (string): Layout type to generate

• description (string, optional): Context about the layout's purpose

Returns: Complete HTML layout with Bootstrap grid system and components.

Generate custom CSS code based on a description of styling needs. Produces ready-to-paste CSS for Bootstrap Studio's CSS editor.

Includes responsive breakpoints, CSS custom properties, and Bootstrap-compatible patterns.

Args:

• request (string): Description of the styling you need (e.g. "hero section with gradient background", "card hover effects")

Returns: Custom CSS code with comments and responsive considerations.

Generate custom JavaScript code for Bootstrap Studio's JS editor. Includes common patterns like smooth scroll, navbar effects, form validation, back-to-top buttons, and tooltip initialization.

Args:

• request (string): Description of the JavaScript functionality you need

Returns: Custom JS code wrapped in DOMContentLoaded ready to paste.

Check if a Bootstrap CSS class needs migration between Bootstrap 4 and Bootstrap 5.

Handles common renames: mr- -> me-, ml- -> ms-, font-weight- -> fw-, text-left -> text-start, etc.

Args:

• class_name (string): The Bootstrap CSS class to check

Returns: Migration suggestion if the class changed between versions.

Look up documentation for a Bootstrap 5 CSS class. Returns description, usage, and related classes.

Args:

• class_name (string): Bootstrap CSS class to look up (e.g. "container", "btn", "d-flex", "g-3")

Returns: Description of the class, its variants, and usage examples.

Search Bootstrap 5 component documentation and examples. Returns the component reference with code examples.

Args:

• component (string): Component name (e.g. "navbar", "card", "form", "modal")

Returns: Component documentation with HTML example code.

Remove a component from a page in a .bsdesign file by its path.

The path format uses type[index] segments, for example: /HTML[0]/Body[0]/Container[0]/Row[0]/Column[0]

Use bs_find_components to discover component paths first.

Args:

• file_path (string): Absolute path to the .bsdesign file

• page_name (string): Name of the page (e.g. "index.html")

• component_path (string): Path to the component to remove (e.g. "HTML[0]/Body[0]/Container[0]/Row[0]")

Returns: Confirmation of removal.

Add a new component to a page in a .bsdesign file.

Args:

• file_path (string): Absolute path to the .bsdesign file

• page_name (string): Name of the page (e.g. "index.html")

• parent_path (string): Path to the parent component (e.g. "HTML[0]/Body[0]/Container[0]")

• component_type (string): Bootstrap Studio component class (e.g. "Row", "Column", "Heading", "Paragraph", "Button", "Image", "Div", "Badge", "Card", "CardBody", "CardTitle", "CardText", "Form", "Input", "Select", "Textarea", "Label", "Checkbox", "Radio", "Alert", "Accordion", "AccordionItem", "Carousel", "CarouselItem", "Modal", "Table", "ListGroup", "Dropdown", "DropdownItem", "Progress", "Spinner", "Breadcrumb", "Pagination", "Offcanvas", "Toast", "Collapse")

• label (string, optional): Label for the component

• css_class (string, optional): Bootstrap CSS class string

• text (string, optional): Text content for text-capable components (Heading, Paragraph, Button, Badge, etc.)

• properties (object, optional): Additional properties as key-value pairs

• position (number, optional): Insert position in parent's children. 0 = first. Omit to append.

Returns: Confirmation with the new component's path.

Update properties of an existing component in a .bsdesign file.

Can update properties, CSS classes, text content, or label. Provide only the fields you want to change.

Args:

• file_path (string): Absolute path to the .bsdesign file

• page_name (string): Name of the page (e.g. "index.html")

• component_path (string): Path to the component (e.g. "HTML[0]/Body[0]/Container[0]/Row[0]/Column[0]")

• properties (object, optional): Properties to update as key-value pairs

• css_class (string, optional): New Bootstrap CSS class string

• text (string, optional): New text content

• label (string, optional): New label for the component

Returns: Confirmation of what was updated.

Replace or append custom CSS code in a .bsdesign file.

Args:

• file_path (string): Absolute path to the .bsdesign file

• file_name (string): CSS file name (e.g. "styles.css")

• block_index (number, optional): Which CSS block to replace (0-based). If omitted, appends a new block.

• css_code (string): The CSS code to set

Returns: Confirmation of the CSS update.

Replace or append custom JavaScript code in a .bsdesign file.

Args:

• file_path (string): Absolute path to the .bsdesign file

• file_name (string): JS file name

• block_index (number, optional): Which JS block to replace (0-based). If omitted, appends a new block.

• js_code (string): The JavaScript code to set

Returns: Confirmation of the JS update.

Update multiple components in a single operation. More efficient than calling bs_update_component multiple times.

Args:

• file_path (string): Absolute path to the .bsdesign file

• page_name (string): Name of the page

• updates (array): List of updates, each with component_path, text, css_class, label, and/or properties

Returns: Summary of all changes applied.