Skip to main content

How do I show multiple code files in one Code Snippet widget (with tabs in the right order)?

Learn how to add multiple snippets, label each tab clearly, reorder files, and keep the code panel easy to scan for readers.

Written by Karan Bhakuni

Use this article when you want your widget to feel like a real mini codebase (for example: index.html, styles.css, script.js) instead of one long code block.

Why this matters

When visitors can switch between related files in a logical order, they understand your example faster and copy the right parts without confusion.

Step 1: Add and name each file tab

  1. Open your Code Snippet widget.

  2. Go to the Content tab.

  3. Click Add a Snippet for each file you want.

  4. For each snippet card:

    • Set Tab Name (example: app.js, api.ts, schema.sql)

    • Set Coding Language

    • Paste code in the Code field

Step 2: Arrange tab order to match reading flow

  1. In the file list, drag items using the drag handle.

  2. Put files in the sequence your audience should read (example: config -> component -> usage).

  3. Keep the first tab as your “starting point” file.

Step 3: Format each file before publishing

  1. Open each snippet card.

  2. Click Format Code.

  3. Check spacing/indentation in preview to avoid hard-to-read blocks.

Best practices for better results

  • Keep tab names real and specific (auth.service.ts is better than file1).

  • Use the correct language per file so syntax coloring looks right.

  • Avoid adding too many tabs in one widget; split into multiple widgets if the example gets too large.

  • Use the search box in Content when managing many files quickly.

Did this answer your question?