Share Your Vibe-Coded Blocks
Use ChatGPT or Claude to generate interactive eLearning components. Paste the code into Slate. Share with a link or export to SCORM.
- AI code blocks included on the free tier
- Theme-aware, responsive components
- Ready-made prompt template included
5 free courses · AI code blocks included · No credit card required
5 free courses
Build up to 5 complete courses at no cost.
AI code blocks
Add interactive components that match your brand.
SCORM 1.2 export
Deploy to any LMS with standard packaging.
Shareable previews
Share your work with a simple link.
How vibe coding works
Generate interactive eLearning components in five steps.
Prompt your AI
Copy the Slate prompt template and tell ChatGPT or Claude what you want: a drag-and-drop, a quiz, a scenario.
Copy the HTML output
The AI returns a complete HTML file. Copy the entire response.
Paste into Slate
Add a Code Block to your lesson and paste. The component renders instantly.
Refine and share
Iterate with the AI until it's perfect, then share your creation with a link or export to SCORM.
The sandbox rules
Slate runs code blocks in a secure iframe. Here's what your AI needs to know.
Container-based DOM access
Use container.querySelector() instead of document.querySelector(). The sandbox provides a scoped root element.
No IIFEs or wrappers
Write script content as bare statements. The sandbox handles execution context.
Self-contained code
No external CDNs, fonts, or API calls. Everything must be inline.
Theme-aware styling
10 CSS variables automatically adapt to light/dark themes and brand colors.
Available CSS variables
Use these variables for automatic theme adaptation:
--primary-colorBrand color--hover-colorHover state color--border-radiusRounded corners--success-colorGreen for success--error-colorRed for errors--text-colorMain text (adapts to theme)--text-mutedSecondary text (adapts to theme)--bg-lightLightest background (adapts to theme)--bg-mutedMuted background (adapts to theme)--border-colorBorders (adapts to theme)The magic prompt
Copy this template and paste it into ChatGPT or Claude before describing your component.
Create an interactive HTML element for an e-learning course. Generate a single, self-contained HTML file.
REQUIREMENTS:
- Single HTML file with embedded <style> and <script> tags
- No external dependencies (no CDNs, external fonts, or API calls)
- Use transparent background (background: transparent on html/body)
- Vanilla JavaScript only (no frameworks)
CRITICAL - JAVASCRIPT SANDBOX:
Your JavaScript runs in a sandbox where 'document' is NOT available. Instead, use 'container' which references your element's root.
Write your <script> content as bare statements (no IIFEs or wrappers):
<script>
// Use container instead of document
const btn = container.querySelector('.my-button');
if (btn) {
btn.addEventListener('click', handleClick);
}
function handleClick() {
container.querySelector('.result').textContent = 'Clicked!';
}
</script>
INSTEAD OF → USE:
- document.querySelector() → container.querySelector()
- document.querySelectorAll() → container.querySelectorAll()
- document.getElementById('x') → container.querySelector('#x')
- document.createElement() → innerHTML or cloneNode()
- document.addEventListener() → container.addEventListener()
AVAILABLE CSS VARIABLES (adapt to light/dark themes):
- var(--primary-color) - brand color
- var(--hover-color) - hover state
- var(--border-radius) - rounded corners
- var(--success-color) - green for success
- var(--error-color) - red for errors
- var(--text-color) - main text (adapts to theme)
- var(--text-muted) - secondary text (adapts to theme)
- var(--bg-light) - lightest background (adapts to theme)
- var(--bg-muted) - muted background (adapts to theme)
- var(--border-color) - borders (adapts to theme)
Start your response with <!DOCTYPE html> - no explanations or markdown.
MY REQUEST:Tip: After pasting the template, add your specific request on a new line. For example: "Create a drag-and-drop matching activity with 5 terms and definitions."
Built for AI-generated code
Slate's Code Block is designed from the ground up for vibe coding.
Theme inheritance
Code blocks automatically match your course theme. Change your brand, everything updates.
Sandboxed execution
JavaScript runs in isolation. Safe for learners, safe for your LMS.
Instant preview
See your component render as you paste. No build step, no waiting.
AI-ready architecture
The prompt template is designed for ChatGPT, Claude, and other LLMs.
Start sharing your vibes today.
5 free courses. AI code blocks included. No credit card required.
Export to SCORM 1.2 · Share with a link · Works with any LMS