Developer Studio & Sandbox Custom Apps
Welcome to the Developer Studio, the ultimate creative suite for Malet Owners who want to transition from standard layouts to fully custom web experiences. Located directly within The Deck at /studio, the Developer Studio empowers you to turn your Malet into an immersive, bespoke Single-Page Application (SPA) while utilizing Mallnline's robust, secure backbone for identity, checkout, and search.
Whether you are hosting a custom interactive virtual showroom, building custom game mechanics, or designing a tailored checkout canvas, the Developer Studio provides the management controls and real-time observability you need to succeed.
Toggling Your Storefront Mode
By default, every Malet on the platform operates in Track 1 (Verticals). This is our zero-code storefront engine where you select an industry-specific Vertical, customize widget slots, and organize navigation tags.
To build a fully custom application (Track 2), you can opt-in to App Mode within the Developer Studio:
- Navigate to The Deck and select Developer Studio from the sidebar navigation.
- In the General Configuration tab, find the Storefront Mode toggle.
- Switch from Vertical (Default) to App (Custom Sandbox).
- Input your custom App Manifest URL (e.g., pointing to your bundle hosted on a secure CDN or local port for testing).
- Click Save Changes.
WARNING
Switching your storefront mode is fully reversible, and your Track 1 storefront widgets, configurations, and themes will remain safely saved in the background. However, once toggled to App Mode, Visitors navigating to your handle will immediately see your custom sandbox SPA instead of the standard storefront widgets.
Managing Client Credentials
To query Mallnline's secure APIs from your external server backend or handle webhooks, your application requires secure authentication. The Developer Studio allows you to register and manage client keys safely.
Registering an Application
Within the Credentials panel:
- Click Register New App.
- Provide a descriptive name and identifier (e.g.,
luminara-custom-spa). - Define the precise OAuth Scopes your app requires (e.g.,
read:productsto showcase products, orwrite:cartto manage the Visitor's uCart). - Specify authorized Redirect URIs for secure visitor logins.
Handling Your Client Secret
Once registered, the platform will generate a unique Client ID and Client Secret:
CAUTION
Your Client Secret is extremely sensitive. It grants programmatic access to your Malet's backend endpoints. Copy it immediately and store it in a secure environment variables configuration (e.g., a .env file). The platform will never display the secret again once you close the modal. If you lose it, you must revoke the credentials and generate a new key.
Auditing Webhook Logs
When important events occur on the platformβsuch as a Buyer completing a payment or updating their shopping cartβMallnline dispatches real-time secure HTTP POST payloads to your application's configured Webhook URL.
To help you monitor and debug these integrations, the Developer Studio contains a state-of-the-art Webhooks Logs Browser built on Svelte 5:
- Live Activity Feed: Monitor outgoing webhooks with real-time status indicators (π΄ 500 Failure, π’ 200 Success) and millisecond-accurate timestamps.
- Deep HTTP Inspection: Click on any log entry to open a dual-pane diagnostics drawer. Review the raw JSON request payload, headers array, and the exact response returned by your server.
- Manual Redispatch (Simulated Retry): If your server was offline or threw an error during a crucial transaction (e.g., a completed Murchase event), click the [Retry β»] button. The platform will instantly queue a simulated retry toast notifications dispatch to re-verify integration.
Security and Sandbox Protections
Mallnline enforces strict safety controls to build trust and protect Visitors:
- Isolated Browsing Context: Your custom app is loaded inside a sandboxed
<iframe>wrapper. It has its own isolated memory heap and is strictly prevented from accessing cookies or data outside its designated boundary. - Dynamic Content Security Policy (CSP): The platform automatically extracts script and image origins from your App Manifest, blocking unauthorized injections or malicious cross-site scripting (XSS).
- Permissions Delegation: Critical browser features (such as camera access, microphones, geolocation, or clipboard writing) are completely blocked unless explicitly requested in your manifest and approved by the visitor.
NOTE
For Developers: If you want to dive deep into postMessage protocol messages, real-time thread diagnostics, or local offline development with the scaffolder, see the Malet App SDK Technical Architecture.
Frequently Asked Questions
Can I run my custom Malet App completely offline for development?
Yes! When you scaffold a starter app using our CLI, it includes a standalone mock sandbox parent bridge. This allows you to test queries and toast notifications directly in your local browser tab (localhost) before deploying to production.
What happens if my custom application exceeds rate limits? To protect the host OS from resource exhaustion, Mallnline enforces rate limits at both the postMessage bridge and the GraphQL Gateway. If your app goes over its limits, the platform will display a smooth, glassmorphic toast notification warning you of API throttling.
How do we handle visitor payments? You do not need to build payment forms or handle PCI-compliant credit card processing. When a Visitor clicks checkout, the SDK safely intercepts the request and redirects the host browser context to Mallnline's unified checkout, ensuring a secure payment environment.
Will my custom app run slowly inside the sandbox iframe?
No, modern browser iframes are highly performant. However, Mallnline active-monitors execution using a PerformanceObserver. If your app blocks the main thread for more than 50ms (causing interface jank), a non-intrusive glassmorphic banner will appear prompting you to optimize heavy main thread loops.
Related
- Building Custom Malet Apps β Learn how to set up the SDK and get started
- The Deck Operations β Overview of the standard merchant control panel
- Creating Your Malet β Core setup instructions for new storefronts
- Designing Your Malet Storefront β Using the Track 1 vertical widget layout engine
- Purchasing & Tracking β Understanding how uCart checkout and order tracking function