Treehouse Web StudioBeta
How to use Components Templates borders.php
Back to library

How to use Treehouse Library

A short walkthrough. Edit this page in src/routes/how-to-use.tsx.

1. The builder layout

The home page is the builder. It has three columns:

  • Left — Templates at the top, then the searchable component library grouped by category.
  • Center — Live preview of your current build queue, with tabs for the generated homepage.html, template.css, homepage.js, and borders.php. Use the device buttons to preview at mobile, tablet, or desktop widths.
  • Right — Your build queue: the ordered list of components that will be merged into the export.

2. Start from a template (optional)

Click any template in the left panel to fill the build queue with its components in order. You can still reorder or remove items before building. Templates are shared with everyone — manage them on the Templates page.

3. Add components to the queue

Use the search and tag chips on the left to find components, then click one to append it to the queue on the right. Most categories (e.g. hero, footer) only allow one component at a time — adding a second swaps the slot. A few components, like text block 2, can be added multiple times.

Your queue is saved in your browser for 24 hours of inactivity, so you can come back and keep building.

4. Reorder and tweak the queue

In the right panel, drag the grip handle to reorder, use the up/down arrows, or click the × to remove an item. The center preview updates live as you change the queue.

5. Preview and inspect the code

Switch the center tabs to read the merged homepage.html,template.css, homepage.js, and (when any queued component has PHP) borders.php. Use the external-preview button to open the full page in a new tab.

6. Build and download

Click Build to download the drop-in files for your page:homepage.html (self-contained, with CSS and JS inlined),template.css, homepage.js, and borders.phpwhen PHP is present.

7. Edit individual components

Visit the Components page to browse and edit the underlying HTML, CSS, JS, and PHP for each component, assign tags and clients, and preview live. Use + New in the header to create a new component from scratch.

8. Edit the CMS wrapper

The borders.php page holds the single PHP wrapper used for exports. It's locked by default — clickUnlock and confirm before editing, since changes affect every built page.