Skip to main content
The Design tab in Playlab is a text editor that allows you to provide additional context for your Playlab app users. This guide will show you how to effectively use the Design tab to create a better user experience that helps users get the most out of your application.
Save RegularlyChanges in the Design tab are not automatically saved. Remember to click the Save button regularly to avoid losing your work.

​
Watch How to Use the Design Tab

Watch a short clip demonstrating how to use the Design tab effectively.

​
Follow these steps to create effective Design tabs

1

Access the Design Tab

Navigate to your app’s Design section.
  1. Open your Playlab app in edit mode
  2. Click on the Design tab in the top navigation bar
Builder header with the Build, Design, and Sessions tabs
  1. You’ll see the Design Tab interface
2

Use the Design Tab

Format your documentation with the rich text editor.
Design tab with an empty public page editor
  1. Use the formatting toolbar to style your text:
    • Bold and italic
    • Headings, from the Paragraph menu
    • Bullet, numbered, and checklists
Design tab editor toolbar
3

Add Media and Links

Enrich your documentation with visual elements.
  1. Insert images from the Insert menu by uploading or pasting a URL
  2. Embed videos from platforms like YouTube or Vimeo with Insert → Video
  3. Add hyperlinks to external resources or references with the link button
Insert menu with Horizontal Rule, Image, Table, and Video
To access a one pager on ⇅ Uploading Images in Design Tab
4

Save, publish, and view it as your users do

Check how your Design tab looks in the published app.
  1. Click Save changes. The Design tab doesn’t save on its own.
  2. If your app isn’t published yet, click Publish at the top of the builder, then Publish App. People can only open a published app. See Publishing your app.
  3. Click the link icon (Copy published link) in the builder header and open the link in a new tab. You see the app the way your users do.
  4. The About this App panel opens next to the app with your Design tab content. Users can close it and reopen it any time with the About this app (ⓘ) button at the top.
  5. Go back to the Design tab to make changes, then save again. Changes show up the next time someone opens the app.
The published Algebra Tutor app as a student sees it, with the About this App panel on the right showing the heading Welcome to Algebra Tutor and a short welcome paragraph

​
Documentation Best Practices

Consider these recommendations when creating documentation in the Design tab:
  • Start with a clear introduction explaining what your app does and its primary benefits
  • Include step-by-step instructions for common use cases
  • Add screenshots or GIFs to illustrate key features
  • Provide examples of inputs and expected outputs
  • Document limitations or known issues to set appropriate expectations
  • Include FAQ section addressing common questions
  • Structure content with headings for better readability
  • Use callouts for important notes or warnings

​
Frequently Asked Questions

Yes, the content you create in the Design tab will be visible to all users who have access to your app. It appears in the About this App panel, which opens when someone starts the published app.This makes it an essential part of the user experience for your application.
Currently, there’s no direct import feature. However, you can copy and paste content from other sources, and the editor will preserve most formatting.For more complex imports, you might need to adjust formatting after pasting.
There is no strict limit, but extremely large design tabs are not as effective.
You can use tools like Loom, Zoom, Canvas Studio (if you use Canvas), or any other video or screen capture software to record a demonstration of your tool or any content you’d like to showcase.
Video
Next, download your video and upload it publicly to YouTube or Vimeo.Once uploaded, copy the video link, go to your design panel, and click Insert, then select Video to embed it.
Download your video as an MP4 file.~~~~~~Upload the MP4 file to Ezgif.~~~~~~Click Convert to GIF.Once converted, right-click (or Control + click on Mac) the GIF and select Copy Image Address.Insert the GIF by clicking Insert, then selecting Image in the design tab. Paste the copied image address into the **Image Link **field.Paste the image address into the **Image Link **field.:Video demonstration:

​
You’re good to go!

​
Need Support?

If you encounter any issues while using the Design tab: Last updated: 04-22-2025