# Widget Studio: Widget Editor Guide > You're reading the Mindset v3 documentation. v3 is no longer sold; this is reference for existing customers. Mindset 4 docs are at /docs. Detailed guide to building and iterating on widgets > **Info:** **Beta Feature** - Widget Studio is currently in beta. Widget Studio is only available for SDK 3.0 customers. The Widget Editor is your workspace for creating and refining widgets. This guide covers all the tools and techniques you need to build production-ready widgets efficiently. ## Widget Editor Overview The Widget Editor has three main tabs plus additional tools for previewing and publishing: #### Main Tabs - **Assistant** - Chat with AI to generate and modify your widget - **Code** - View and copy the MDX code for your widget - **Data** - See the data structure your tool provides #### Additional Tools - **Examples** - Browse and copy prompts from example widgets - **Preview** - See your widget on desktop/mobile, light/dark modes - **Design System** - Apply your brand colors - **Publish** - Review checklist and publish when ready ## Assistant Tab: Building with AI ### How the Widget Editor Agent Works The Agent generates MDX code based on your natural language descriptions. You don't need to know how to code - just describe what you want. **What Happens When You Send a Message:** ### 1. Type and send You type your request and hit send ### 2. Processing status Status shows "Sending request..." ### 3. Widget updates Widget updates automatically in the preview ### 4. Changes appear No reply message appears - changes just show up > **Note:** We're adding conversational responses soon. For now, just check the preview to see if your changes worked. ### Writing Effective Prompts The key to great results is being specific about what you want. **Good prompt structure:**\ \[Action] + \[Component] + \[Visual details] + \[Interaction behavior] **Examples:** #### Be Descriptive **Good:**\ "Create a quiz widget with one question displayed at a time, four multiple choice buttons in a 2x2 grid, and a submit button at the bottom" **Not as good:**\ "Make a quiz" #### Include Visual Details **Good:**\ "Add a progress bar at the top showing question 3 of 10, make it blue to match our brand" **Not as good:**\ "Add progress" #### Specify Interactions **Good:**\ "When the user clicks an answer, highlight it in green and disable the other options" **Not as good:**\ "Make it interactive" ### Using the Examples Library The fastest way to build is starting with an example. **To Access:** 1. Click the **Examples** button in the Editor 2. Browse by category or search by keyword 3. Click on any example to see details **Categories Include:** #### Data Visualization Charts, graphs, dashboards #### Feedback & Communication Forms, surveys, notifications #### Data Display Lists, cards, tables #### User Input Forms, selectors, pickers #### Navigation & Controls Menus, tabs, buttons #### Scheduling Calendars, timelines #### Surveys and Assessments Quizzes, polls #### Text & Documents Readers, previews **To Use an Example:** ### 1. Find an example Find an example close to what you want ### 2. Copy Prompt Click Copy Prompt ### 3. Return to Assistant Return to Assistant tab ### 4. Paste the prompt Paste the prompt ### 5. Send it Send it ### 6. Modify from there Modify from there > **Tip:** Even if an example isn't perfect, it's often faster to start with something close and modify it than to start from scratch. ### Iterating on Your Widget **Making Changes:** Just chat naturally with the Agent: - "Make the buttons larger" - "Change the color scheme to use our brand purple" - "Add icons next to each option" - "Move the submit button to the right side" - "Add a congratulations message when the quiz is complete" **Each Message Creates a New Version:** - Your edit history is saved as versions - You can always revert to a previous version - See the Versions tab for full history > **Warning:** **Current Limitation:** If you switch to another tab (Code, Data, etc.) and come back, your message history will be gone. We're fixing this soon. For now: Keep notes externally if you switch tabs, or try to complete edits in one session. ### Working with Tool Data Your widget displays data from your tool. The Data tab shows you what information your tool provides. **To Reference Tool Data in Your Prompts:** "Show the course title, description, and rating from the tool data" "Display the quiz questions as a list with the question text and four answer options" "Create a card for each result that shows the thumbnail image, title, and price" The Agent understands your tool's data structure and will map it correctly. ## Code Tab: Viewing and Copying MDX ### What's in the Code Tab The Code tab shows the MDX (Markdown + JSX) code that powers your widget. You don't need to understand this code to use Widget Studio, but it's here if you want to: - Copy the code to use elsewhere - Share it with developers - Keep a backup ### Copying Your Code ### 1. Go to the Code tab Navigate to the Code tab ### 2. Click the Copy button Click the Copy button ### 3. Code is copied Your MDX code is now on your clipboard You can paste this into: - External code editors - Other AI tools for further refinement - Documentation for your team ### Import Function (Coming Soon) You'll see an **Import** button in the Code tab. This doesn't work yet - we're enabling it soon. > **Tip:** **For Now:** If you have MDX code you want to use, paste it directly into the Agent chat and it should process it. ## Data Tab: Understanding Tool Output ### What the Data Tab Shows The Data tab displays the structure of data your tool returns. This helps you understand what information you have available to display in your widget. **Example Data Structure:** ```json { "courses": [ { "title": "Introduction to Python", "description": "Learn Python basics", "rating": 4.5, "thumbnail": "https://...", "duration": "6 weeks" } ] } ``` ### Using Data in Your Widget When you describe your widget to the Agent, reference the data fields you see: "Show each course as a card with the thumbnail image, title, rating, and duration. Add an 'Enroll Now' button for each." The Agent maps your description to the actual data structure automatically. ## Preview: Testing Your Widget ### Preview Modes #### Device Preview - **Desktop** - How your widget looks in the full-width agent chat - **Mobile** - How it appears on mobile devices #### Theme Preview - **Light Mode** - Default light theme - **Dark Mode** - Dark theme appearance **Why Preview Matters:** - Text that's readable on desktop might be too small on mobile - Colors that work in light mode might not contrast well in dark mode - Interactive elements need to be touch-friendly on mobile ### What to Check #### On Desktop - Does the layout use space effectively? - Are buttons and interactive elements easy to click? - Is text easily readable? #### On Mobile - Does content fit without horizontal scrolling? - Are touch targets large enough (buttons, links)? - Is text still readable at smaller sizes? #### In Light Mode - Is contrast sufficient for readability? - Do colors align with your brand? #### In Dark Mode - Does text remain readable? - Do colors still look good? - Are borders and dividers visible? > **Tip:** Preview your widget in all modes before publishing. What looks great on desktop in light mode might be unreadable on mobile in dark mode. ## Design System: Applying Your Brand ### What Design Systems Do Design systems automatically apply your brand colors throughout your widget. When you select a design system, colors propagate to: - Buttons - Backgrounds - Text highlights - Borders - Interactive elements ### Changing Design Systems ### 1. Click the Design System dropdown Click the Design System dropdown ### 2. Select from your configured design systems Select from your configured design systems ### 3. Preview updates immediately Preview updates immediately ### 4. Switch between systems Switch between systems to see which looks best > **Note:** Design systems are configured at the platform level. To learn more about Design System set up see here \[doc link coming soon] ## Versions: Managing Widget History ### How Versioning Works Every time you edit your widget and the Agent generates new code, a new version is created automatically. **Version Information:** - Version number (0.1, 0.2, 0.3, etc.) - Timestamp of creation - Status (Published, Unpublished, Latest) ### Viewing Version History ### 1. Go to the Versions tab Go to the Versions tab ### 2. See all versions See all versions listed with timestamps ### 3. Click on any version Click on any version to view its code ### Reverting to a Previous Version To go back to an earlier version: ### 1. Unpublish your current widget Unpublish your current widget ### 2. Go to Versions tab Go to Versions tab ### 3. Find the version you want Find the version you want ### 4. Click Promote to Latest Click Promote to Latest ### 5. Go to Publish tab Go to Publish tab ### 6. Click Publish Click Publish > **Warning:** Only the latest version can be published. To publish an older version, you must first promote it to latest. ## Publishing: Making Your Widget Live ### Publishing Checklist Before you can publish, certain requirements must be met: - ✓ Widget Name - Must have a name - ✓ Widget Description - Must have a description - ✓ Widget Mode - Display or Standalone selected - ✓ Initial Version - At least version 0.1 created - ✓ Widget Code - MDX code generated - ✓ Widget Compiles - Code compiles successfully Most of these are automatically checked as you build. If something's missing, you'll see what needs attention. ### Publishing Your Widget ### 1. Go to the Publish tab Go to the Publish tab ### 2. Review the checklist Review the checklist - all items should be checked ### 3. Click Publish Click Publish ### 4. Your widget is now live! Your widget is now live! **What Happens When Published:** - Widget becomes active in your agent - When the agent calls your tool, the widget displays automatically - End users see your widget in the agent chat ### Unpublishing To take a widget offline: ### 1. Open the widget Open the widget ### 2. Go to Publish tab Go to Publish tab ### 3. Click Unpublish Click Unpublish ### 4. Tool continues to work Tool continues to work, but widget won't display **When to Unpublish:** - Making major edits - Widget isn't working as expected - Testing changes before republishing ## Practical Examples ### Example 1: Building a Quiz Widget #### Initial prompt "Create a quiz widget that shows one question at a time with four multiple choice answers. Include a progress indicator and a submit button." #### Refining the design "Make the answer buttons larger with more padding. Add a blue progress bar at the top showing question number out of total." #### Adding interactions "When the user selects an answer, highlight it in green and disable the other options. Show a 'Next Question' button after they select." #### Final polish "Add a completion screen that shows their score as a percentage with a congratulations message. Include a 'Retake Quiz' button." ### Example 2: Building a Course Catalog #### Initial prompt "Build a course catalog that displays courses as cards in a grid. Each card should show the thumbnail, title, rating, and duration." #### Improving the layout "Change to a 3-column grid on desktop and single column on mobile. Add more spacing between cards." #### Enhancing visuals "Display the rating as yellow stars instead of numbers. Add a subtle shadow to each card and a hover effect that slightly elevates it." #### Adding functionality "Include an 'Enroll Now' button on each card. When hovering over a course, show the number of students already enrolled." ### Example 3: Building a Booking Calendar #### Initial prompt "Make a calendar widget for booking appointments. Show available time slots as buttons." #### Adding structure "Organize time slots by day of the week. Show morning, afternoon, and evening sections clearly labeled." #### Improving interaction "When a user clicks a time slot, highlight it and show a confirmation panel asking them to confirm or cancel. Display the selected date and time clearly." #### Final touches "Add a small calendar icon next to each time slot. Disable past time slots and show them in gray. Add a success message after booking is confirmed." ## Best Practices ### Building Effective Widgets - **Start Simple**: Get basic functionality working first. Add visual polish and complexity later. Iterate gradually. - **Test Thoroughly**: Preview on desktop and mobile. Check light and dark modes. Test with real tool data if possible. - **Consider Your Users**: Make touch targets large enough for mobile. Use clear, readable text. Provide visual feedback for interactions. ### Managing Your Workflow #### Keep Sessions Focused - Complete related edits in one session - Don't switch tabs unnecessarily (message history will be lost) - Save/publish when you reach a good stopping point #### Use Version Control - Major milestones = good time to note the version - Can always revert if needed - Promotes a safety net for experimentation #### Backup Important Work - Copy MDX code for critical widgets - Keep external notes on design decisions - Document what prompts worked well ## Troubleshooting #### Problem: Agent doesn't seem to understand my request **Try:** - Be more specific and descriptive - Reference the data structure from the Data tab - Use an example from the library as a starting point #### Problem: Widget looks good on desktop but broken on mobile **Try:** - Ask the Agent: "Make this responsive for mobile devices" - Simplify the layout for smaller screens - Test preview on Mobile mode as you iterate #### Problem: Colors don't match my brand **Try:** - Switch Design Systems - Ask the Agent: "Use colors from the \[System Name] design system" - Contact your team if you need a new design system created #### Problem: I lost my message history This happens when you switch tabs. For now: - Keep external notes - Try to complete edits in one session - We're fixing this soon > **Info:** **Questions?** Contact your Mindset AI team.