Founding Xenn Members Beta Policy

The first 100 artists who upload at least one track during beta become Founding Xenn Members and receive lifetime 20% off paid Xenn tools, including future tiers, merch boosts, royalty multipliers, and new releases.

Xenn Docs

Spotlight Builder Help And Tutorial

This manual is built for the current Xenn Spotlight Builder setup. Part 1 gets users started fast. Part 2 goes deep for creators who want to push complex page systems.

Open Spotlight Studio Back To Learn Jump To Part 1 Jump To Part 2 (Advanced)

What Is Safe To Reuse

GrapesJS core is open source (BSD-3-Clause), but this page is custom-written for Xenn and does not copy vendor docs verbatim. That keeps guidance accurate to your active UI and clean for usage.

Part 1: Getting Started Fast

Part 1 is intentionally practical and beginner-friendly. It is enough to build and publish solid pages quickly. Once comfortable, move to Part 2 for advanced patterns.

Quick Start Checklist

Open `Spotlight Studio` from the Spotlight page.
Apply `Xenn Default Homepage Template` from the top dropdown.
Edit content on canvas and style from the right panel.
Check `Device` modes for desktop/tablet/mobile quality.
Click `Save Draft`, then `Publish` when ready.
Use `Open Published Page` for final QA.

Step-By-Step Tutorials

Example 1: Build And Publish A Full Page In 10 Minutes

Use this flow when you want to go from zero to live quickly using a starter template.

Open Studio: Go to Spotlight and open Spotlight Studio. Wait for the status row to show Studio ready.
Apply a starter template: Choose `Xenn Default Homepage Template` from the top dropdown and click Apply Starter Template. This is the primary quick-start setup with bio, tracks, synced playlist integration, merch, live schedule, and comments portal.
Sync your playlists into the page: Open the Playlists panel, create or refresh playlists, check `Feature On Page` for the ones you want, then click `Sync Playlist Section` to stamp the live playlist block into the canvas.
Edit copy and sections: Click text directly on canvas to rewrite headline, description, CTA labels, and list items. Select section containers to tune spacing and layout from the right panel.
Style the selected element: Use right-side controls: Layout for spacing/alignment, Typography for text style, Background for color/gradients, and Border/Effects for depth.
Check responsive behavior: Switch Device mode (top bar) across desktop/tablet/mobile and adjust section spacing and text sizes where needed.
Save and publish: Click Save Draft, then Publish. After success, use Open Published Page from the status row to verify the live output, including the synced playlist cards and tracks.

Example 2: Build A Page From Xenn Blocks

Use this flow when you want a custom composition instead of a starter template.

Start from a light structure: Apply a simple template or remove sections you do not need. Keep one top-level wrapper section for cleaner organization.
Add hero and media modules: Open blocks panel and insert Xenn Hero and Music Player first. This establishes your top-of-page narrative and playback anchor.
Add conversion sections: Insert stats, merch, gallery, membership cards, or form sections to create clear fan actions after the hero.
Organize hierarchy: In layers/components view, keep a clean section order: Hero, Media, Social Proof, Offer, Capture Form, Footer CTA.
Polish visuals: Apply consistent spacing scales and repeat accent colors for visual rhythm. Avoid mixing too many font sizes in one viewport.
Validate interaction: Confirm links, buttons, and audio controls are visible and reachable in mobile device mode before publishing.

Example 3: Team Workflow (Draft, Export, Review, Publish)

Use this flow when several people are collaborating on one page.

Draft with autosave: Work normally and let autosave run. The status row shows draft and last save state.
Create explicit checkpoint: Click Save Draft before handoff so teammates start from a known state.
Export review bundle: Click Export Safe Bundle to download project JSON plus HTML/CSS artifacts for offline QA or archival review.
Apply revision notes: Implement requested edits directly in Studio and re-check device modes.
Publish and smoke test: Publish, open the live page, and verify hero, media, CTA links, and form sections across desktop and mobile.
Record release notes: Note template used, key style decisions, and publish timestamp for future iterations.

Part 2: In-Depth Builder Manual

This section is for advanced creators who want to go beyond default or intro builds. It covers complex composition, conversion sequencing, high-density layouts, and operational page design.

Multi-section information architecture
Complex CTA strategy and funnel sequencing
High-detail event and campaign structures
Collaborative review and iteration workflows

Part 2 Complex Tutorials

Complex Tutorial A: Premium Release Funnel + Membership Stack

This build combines narrative hero, streaming module, tiered memberships, merch grid, and CRM segmentation in one conversion path.

Load a high-detail base template: Start with Artist Ecosystem Pro. Keep the hero, KPI block, and release matrix as your initial structure.
Define conversion sequence before styling: Set your flow in this order: Hero CTA -> Featured Track -> Proof/KPIs -> Membership tiers -> Merch -> Capture form.
Create a two-tier CTA strategy: Primary CTA should drive immediate listening/purchase. Secondary CTA should drive membership or collector entry.
Normalize spacing rhythm: Use one vertical spacing scale across all sections so the page feels intentional. Remove one-off random margins.
Build trust modules: Add stats, reviews, quote strips, and release roadmap milestones between content and offer sections.
Tune mobile experience manually: Switch to mobile device mode and reduce heading sizes, card columns, and section padding where wrapping becomes noisy.
Prepare segmented form capture: In form fields, collect only what matters for campaigns (email, city, format preference, budget band).
Final QA and publish: Run visual QA for desktop/tablet/mobile, click all CTA paths, then Save Draft and Publish.

Complex Tutorial B: Festival Operations Command Page

This build demonstrates a high-density event page with timeline operations, ticket pressure indicators, sponsor inventory, and community capture.

Start from Festival Command Center: Apply Festival Command Center and preserve stage timeline + availability cards as your operational core.
Map information architecture: Top area = mission + ticket actions. Mid area = schedule and live availability. Lower area = sponsor and community modules.
Implement urgency logic in content: Use status labels and ticket availability percentages consistently to drive urgency without visual clutter.
Create sponsor inventory zones: Add sponsor cards by tier (title partner, stage sponsor, app banner, lounge naming). Keep equal card heights for scanability.
Add map and stream support: Reserve a large map/media panel and a stream module with short instructions so users can navigate and watch in one page.
Add community capture flow: Place email and phone capture near the lower half of the page after schedule confidence is established.
Optimize for real event updates: Use simple text and card patterns that can be edited quickly during live event changes.
Publish and run live-check loop: After publish, test key visitor tasks: buy ticket, view map, read schedule, join alerts.

Troubleshooting

Issue	Likely Cause	Fix
Template not applying	No template selected or invalid template payload	Re-select template and click `Apply Starter Template` again
Page looks broken on mobile	Desktop spacing/font values too large	Switch device mode and reduce size/padding on key blocks
Save works but publish fails	Auth/session or API publish condition issue	Refresh session, save again, then publish
Cannot find exported artifacts	Browser downloads blocked or grouped in downloads tray	Allow downloads and re-run `Export Safe Bundle`

Glossary

Use this glossary to align terminology across creators, editors, and reviewers.

Autosave

Automatic draft save behavior that updates after editing activity.

Background

Right-side style section used for color, image, and gradient settings.

Block

Reusable drag/drop content module, such as Xenn Hero or Music Player.

Builder

The visual editor where you create and style your Spotlight page.

Canvas

The central page preview/editing area where components are placed.

Classes

CSS class controls for the currently selected element.

Component

Any individual page element: text, section, image, button, list, etc.

Deploy URL

The public URL returned after a successful publish/deploy step.

Device Mode

Desktop/tablet/mobile preview switcher used for responsive tuning.

Draft

Unpublished version of your page saved locally and/or in cloud storage.

Export Safe Bundle

Download package containing project JSON plus the HTML and CSS artifacts used for safe review and archival export.

Gradient

A color transition used in section backgrounds for depth and emphasis.

Handle

Your page identifier/slug used to find or open specific Spotlight pages.

Hero Section

Top-most section that introduces the page and primary call-to-action.

Inline Style

Style attached directly on an element rather than through external CSS.

Layout

Right-side controls for spacing, alignment, size, and position.

Layers

Structural tree of page elements used to manage hierarchy.

Live Page

Published version visible to visitors.

Publish

Action that promotes current draft content to a publicly accessible page.

Right Panel

Primary styling control panel containing classes, layout, typography, and more.

Starter Template

Pre-built page structure you can apply as a starting point.

Status Row

Info row showing state like editing, autosaved, publish result, and template source.

Typography

Right-side controls for font size, weight, spacing, and text styles.

Variant

Alternative visual version or style treatment for similar page sections.

Xenn Block

Custom block shipped in this project (hero, player, stats, gallery modules).