Skip to main content

Preview Mode

Overview​

Preview Mode lets you experience your Living Story exactly as your audience will see it. This is where you test your story's flow, interactions, and conditional logic before sharing it with others.

Accessing Preview Mode​

To preview your story:

  1. Open your story in the Story Portal
  2. Click the Preview button in the toolbar
  3. Story opens in full-screen preview
  4. Navigate through your story to test it

When you enter Preview Mode:

  • Your story starts from the beginning (first sequence)
  • All editor controls disappear
  • Navigation buttons appear on the sides
  • Your preview path is tracked as you make choices

Preview Interface​

Scene Display​

Each scene appears as a card in the center of the screen:

Scene Card Layout:

  • Header: Scene number and title (e.g., "1 INT. SUBURBAN HOME – KITCHEN – NIGHT")
  • Content: Scene text displayed in clean, readable format
  • Styling: White background, rounded corners, centered on screen

Scene Order:

  • Scenes appear in their sequence order
  • Scroll down to read multiple scenes in a sequence
  • Each scene card stacks vertically
  • First scene has top margin, last scene has bottom margin

Conditional Scenes​

Scenes with conditions have special visual treatment:

  • Highlighted border (different color) indicates conditional scene
  • Scene only appears if its condition is met
  • Scene is skipped if condition is false
  • This helps you verify conditional logic is working

See Influences for more about conditional content.

Preview Mode has two main navigation buttons:

Next Interaction Button (right side):

  • Location: Rotated vertical button on the right edge
  • Appearance: Colored background with branch icon
  • Shows when: Next item in the story is an interaction
  • Action: Click to proceed to the interaction choice screen

Previous Button (left side):

  • Location: Rotated vertical button on the left edge
  • Appearance: Colored for sequences, white for interactions
  • Shows when: You're past the starting point
  • Action: Click to go back to previous sequence or interaction
  • Icons: Different icons show what you're going back to

Navigation behavior:

  • Cannot go back from the story's entry point
  • Buttons only appear when navigation is possible
  • Different colors indicate sequence vs interaction navigation
  • Smooth transitions between story elements

Navigating Your Story​

Linear Progression​

For stories without branching:

  1. Read scenes in the current sequence (scroll down)
  2. Click "Next Interaction" when it appears (if you have interactions)
  3. Make your choice at interaction points
  4. Continue reading the next sequence
  5. Repeat until story ends

Branching Navigation​

For stories with choices:

  1. Read the sequence leading to a decision point
  2. "Next Interaction" button appears on the right
  3. Click to see interaction options
  4. Select your choice from the available options
  5. Story continues down the path you chose
  6. Use "Previous" to go back and try different choices

Going Back​

To revisit previous parts:

  1. Click the "Previous" button on the left
  2. System tracks your location and path
  3. Go back to previous interaction or sequence
  4. Make different choices to explore alternate paths
  5. Story updates based on new selections

Note: Going back lets you test all story branches without restarting from the beginning.

Interactions in Preview​

How Interactions Work​

When you reach an interaction point:

  1. Sequence ends with the interaction
  2. Interaction screen appears showing your options
  3. You select an option (poll choice, text input, etc.)
  4. Next sequence loads based on your selection
  5. Story continues from that point

See Interactions Overview for details about interaction types.

Testing Different Choices​

To test all interaction branches:

Method 1 - Go Back:

  1. Make a choice and see where it leads
  2. Click "Previous" to return to the interaction
  3. Make a different choice
  4. Compare the different paths

Method 2 - Restart:

  1. Exit Preview Mode
  2. Enter Preview Mode again (starts from beginning)
  3. Progress to the interaction
  4. Make a different choice

Tip: Use the go-back method to quickly test all branches without re-reading the entire story.

Influences in Preview​

Viewing Influences​

When influences are present in your story:

  1. Influences appear where you've placed them in scenes
  2. Click an influence to interact with it
  3. Influence preview modal appears
  4. Select a result from the available options
  5. Story continues with that influence value set

See What Are Influences for more about how influences work.

How Influences Affect Preview​

Influences control:

  • Which conditional scenes appear
  • What conditional text is shown
  • Which paths become available
  • Story personalization

During preview:

  • Make influence choices to set values
  • Watch how conditional content responds
  • Test different influence combinations
  • Verify your conditional logic works correctly

Testing Your Story​

What to Test​

Story Flow:

  • Does the story progress smoothly?
  • Do sequences connect correctly?
  • Are there any dead ends?
  • Does the story reach its ending(s)?

Scene Content:

  • Is all text displaying correctly?
  • Are scene titles accurate?
  • Is content readable and formatted well?
  • Do conditional scenes appear at the right times?

Interactions:

  • Do all interaction options appear?
  • Does each choice lead to the correct path?
  • Are interaction instructions clear?
  • Do branching paths work as intended?

Conditional Logic:

  • Do conditional scenes show/hide correctly?
  • Does conditional text update properly?
  • Do influences trigger the right content?
  • Are conditions evaluating correctly?

See Testing Your Story for detailed testing strategies.

Testing Different Paths​

Complete path testing:

  1. Map out your story branches (use canvas or notebook)
  2. Test each path individually:
    • Main path (most common choices)
    • Alternative paths (other choices)
    • Edge cases (unusual combinations)
  3. Document what you test (notebook or external notes)
  4. Note any issues for fixing
  5. Retest after changes

Quick testing:

  • Test the happy path (main intended route)
  • Test one alternative at each branch
  • Test the ending
  • Test any complex conditional logic

Common Preview Scenarios​

Testing a Linear Story​

For stories with no branching:

  1. Enter Preview Mode
  2. Read through all scenes
  3. Verify content appears correctly
  4. Check that story flows to the end
  5. Test any conditional content by varying influences

Testing a Branching Story​

For stories with choices:

  1. First playthrough: Follow main path
  2. Go back to first interaction
  3. Test alternative choice
  4. Continue to next interaction
  5. Repeat for each branching point
  6. Map outcomes as you test
  7. Verify all paths lead somewhere meaningful

Testing Conditional Content​

For stories with influences:

  1. Identify conditional scenes (highlighted border)
  2. Note what conditions they require
  3. Make influence choices to meet conditions
  4. Verify scene appears
  5. Go back and test opposite conditions
  6. Verify scene disappears when conditions aren't met
  7. Test boundary cases (edge values)

Tips and Best Practices​

Regular Preview Testing​

Test frequently:

  • After creating new sequences
  • After adding interactions
  • After setting up conditional logic
  • Before sharing with others
  • After making structural changes

Why test often:

  • Catch issues early
  • Easier to identify what broke
  • Less to fix at once
  • Maintains story quality

Systematic Testing Approach​

Create a checklist:

  • All sequences are accessible
  • All interactions work
  • All interaction branches connect properly
  • All conditional scenes appear/disappear correctly
  • Story has proper ending(s)
  • No broken connections
  • Content is readable and formatted

Follow the checklist:

  • Test one item at a time
  • Check off completed items
  • Document issues found
  • Fix and retest

Testing with Others​

Get fresh eyes:

  • Share with "Preview Only" permission (see Permission Levels)
  • Ask testers to try different choices
  • Gather feedback on flow and clarity
  • Note any confusion or issues
  • Make improvements based on feedback

Using the Notebook​

Document your testing in the Notebook:

# Testing Notes

## Test Session - Dec 4, 2024

### Path 1: Cautious Route
- Tested choosing "Wait and observe"
- Leads to Scene 8 correctly
- Ending A triggers properly

### Path 2: Bold Route
- Tested choosing "Take immediate action"
- Leads to Scene 9 correctly
- Conditional scene (Scene 10) appeared when courage > 5

### Issues Found
- Scene 12 title has typo
- Interaction in Scene 7 missing third option text
- Conditional scene border appeared on wrong scene

### To Fix
- [ ] Correct Scene 12 title
- [ ] Add text to third option
- [ ] Check Scene 10 conditional settings

Exiting Preview Mode​

To return to editing:

  1. Close the preview (browser back button or close tab)
  2. Return to editor view
  3. Make any needed changes based on testing
  4. Preview again to verify fixes

Note: Preview Mode is a separate view—closing it returns you to the editor without losing work.

Limitations and Considerations​

Read-Only Experience​

In Preview Mode:

  • Cannot edit content
  • Cannot modify structure
  • Cannot change settings
  • Can only experience the story

To make changes: Exit Preview Mode and return to the editor.

Path Tracking​

Preview remembers:

  • Your current position in the story
  • The path you've taken
  • Choices you've made
  • Influence values you've set

When you restart Preview:

  • Everything resets
  • Start from beginning
  • All choices cleared
  • Influence values reset

Mobile Testing​

Preview Mode in the browser shows desktop experience:

  • May not reflect mobile layout
  • Touch interactions might work differently
  • For full mobile testing, use the actual deployment/mobile app

Best practice: Test in browser first, then test on actual devices before final deployment.

Next Steps​