Utilities
JavaScript utility components for clipboard, fetch, font preview, grid layers, and initialization.
Clipboard Helper
Copy content to clipboard with visual feedback.
HTML
<!-- Copy button for code -->
<div
style="
position: relative;
background: #1e1e1e;
border-radius: 12px;
overflow: hidden;
"
>
<div
style="
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #2d2d2d;
"
>
<span style="color: #888; font-size: 13px">JavaScript</span>
<button
class="ss-c-copy-button"
data-ss="copy"
style="
padding: 6px 12px;
background: #3d3d3d;
border: none;
border-radius: 4px;
color: #ccc;
cursor: pointer;
font-size: 13px;
"
>
▤ Copy
</button>
</div>
<pre
style="
margin: 0;
padding: 16px;
color: #d4d4d4;
overflow-x: auto;
"
><code>const greeting = "Hello, World!";
console.log(greeting);</code></pre>
</div>
<!-- Copy with different states -->
<div style="display: flex; gap: 12px; margin-top: 24px">
<button
data-ss="copy"
data-copy-text="npm install stylescape"
style="
padding: 12px 20px;
background: var(--color_fill_secondary);
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
"
>
<span class="ss-c-copy-icon">▤</span>
<span class="ss-c-copy-text">Copy install command</span>
</button>
<button
class="is-copied"
style="
padding: 12px 20px;
background: var(--color_state_success);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
"
>
<span>✓</span>
<span>Copied!</span>
</button>
</div>
<!-- Copy input value -->
<div
style="margin-top: 24px; display: flex; gap: 8px; max-width: 500px"
>
<input
type="text"
id="shareLinkInput"
value="https://stylescape.dev/share/abc123"
readonly
style="
flex: 1;
padding: 12px 16px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
font-family: monospace;
"
/>
<button
data-ss="copy"
data-copy-target="#shareLinkInput"
style="
padding: 12px 20px;
background: var(--color_fill_primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
"
>
Copy Link
</button>
</div>Fetch Client
HTTP client for API requests with CSRF support.
Sending request...
✓ Success
Message sent successfully!
✕ Error
Network error. Please try again.
HTML
<!-- Form with AJAX submit -->
<form
data-ss="fetch-form"
data-ss-fetch-form-url="/api/contact"
data-ss-fetch-form-method="POST"
style="
max-width: 400px;
display: flex;
flex-direction: column;
gap: 16px;
"
>
<div>
<label
style="
display: block;
margin-bottom: 6px;
font-weight: 500;
"
>
Name
</label>
<input
type="text"
name="name"
required
style="
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
"
/>
</div>
<div>
<label
style="
display: block;
margin-bottom: 6px;
font-weight: 500;
"
>
Email
</label>
<input
type="email"
name="email"
required
style="
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
"
/>
</div>
<div>
<label
style="
display: block;
margin-bottom: 6px;
font-weight: 500;
"
>
Message
</label>
<textarea
name="message"
rows="4"
required
style="
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
resize: vertical;
"
></textarea>
</div>
<button
type="submit"
style="
padding: 14px 24px;
background: var(--color_fill_primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
"
>
Send Message
</button>
</form>
<!-- Loading state -->
<div
style="
margin-top: 24px;
padding: 20px;
background: var(--color_fill_secondary);
border-radius: 12px;
display: flex;
align-items: center;
gap: 12px;
"
>
<span
style="
width: 20px;
height: 20px;
border: 2px solid var(--color_line_secondary);
border-top-color: var(--color_fill_primary);
border-radius: 50%;
animation: spin 1s linear infinite;
"
></span>
<span>Sending request...</span>
</div>
<!-- Response states -->
<div
style="margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap"
>
<div
style="
padding: 16px;
background: rgba(34, 197, 94, 0.1);
border-left: 4px solid var(--color_state_success);
border-radius: 0 8px 8px 0;
"
>
<strong style="color: var(--color_state_success)">
✓ Success
</strong>
<p style="margin: 4px 0 0; font-size: 14px">
Message sent successfully!
</p>
</div>
<div
style="
padding: 16px;
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid var(--color_state_error);
border-radius: 0 8px 8px 0;
"
>
<strong style="color: var(--color_state_error)">
✕ Error
</strong>
<p style="margin: 4px 0 0; font-size: 14px">
Network error. Please try again.
</p>
</div>
</div>Grid Layer Toggle
Toggle visibility of grid overlay layers for design alignment.
HTML
<!-- Grid toggle controls -->
<div style="display: flex; gap: 12px; margin-bottom: 24px">
<button
data-ss-l-grid-toggle="columns"
style="
padding: 10px 16px;
background: var(--color_fill_primary);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
"
>
Columns Grid
</button>
<button
data-ss-l-grid-toggle="baseline"
style="
padding: 10px 16px;
background: var(--color_fill_secondary);
border: none;
border-radius: 6px;
cursor: pointer;
"
>
Baseline Grid
</button>
<button
data-ss-l-grid-toggle="spacing"
style="
padding: 10px 16px;
background: var(--color_fill_secondary);
border: none;
border-radius: 6px;
cursor: pointer;
"
>
Spacing Grid
</button>
</div>
<!-- Grid overlay example -->
<div
style="
position: relative;
padding: 40px;
background: white;
border: 1px solid var(--color_line_secondary);
border-radius: 12px;
overflow: hidden;
"
>
<!-- Column grid overlay -->
<div
data-ss-l-grid-layer="columns"
style="
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
padding: 0 16px;
pointer-events: none;
"
>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
<div style="background: rgba(102, 126, 234, 0.1)"></div>
</div>
<!-- Content -->
<div style="position: relative">
<h4 style="margin: 0 0 12px">Design Alignment</h4>
<p style="margin: 0">
Toggle the grid overlays to check alignment with the design
system grid.
</p>
</div>
</div>Auto Initialization
Automatic component initialization via data-ss attributes.
Hover for tooltip
HTML
<!-- Auto-initialized components -->
<div
data-ss="tooltip"
data-ss-tooltip-content="Auto-initialized!"
style="
display: inline-block;
padding: 12px 20px;
background: var(--color_fill_secondary);
border-radius: 8px;
cursor: pointer;
"
>
Hover for tooltip
</div>
<!-- Skip auto-initialization -->
<div data-ss="modal" data-ss-skip-init="true" style="display: none">
<!-- This modal won't be auto-initialized -->
<!-- Must be initialized manually via JavaScript -->
</div>
<!-- Custom configuration via JSON -->
<div
data-ss="carousel"
data-ss-config='{"loop": true, "autoplay": 3000, "slidesToShow": 2}'
style="margin-top: 16px"
>
<!-- Carousel with custom config -->
</div>
<!-- Manual initialization example -->
<script>
// Skip auto-init and initialize manually
const modal = document.querySelector("[data-ss-skip-init]");
if (modal) {
new Modal(modal, {
closeOnBackdrop: true,
animation: "fade",
});
}
</script>Font Preview
Live font preview from text input.
The quick brown fox jumps over the lazy dog
Inter - Sans SerifThe quick brown fox jumps over the lazy dog
Georgia - SerifThe quick brown fox jumps over the lazy dog
Fira Code - Monospace
HTML
<!-- Font preview component -->
<div
style="
max-width: 600px;
padding: 24px;
background: var(--color_fill_secondary);
border-radius: 12px;
"
>
<div style="margin-bottom: 20px">
<label
style="
display: block;
margin-bottom: 8px;
font-weight: 500;
"
>
Preview Text
</label>
<input
type="text"
data-ss="font-preview-input"
value="The quick brown fox jumps over the lazy dog"
style="
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
font-size: 16px;
"
/>
</div>
<div style="display: grid; gap: 16px">
<div
style="
padding: 20px;
background: white;
border-radius: 8px;
"
>
<p
style="
font-family: "Inter", sans-serif;
font-size: 24px;
margin: 0;
"
>
The quick brown fox jumps over the lazy dog
</p>
<span
style="
font-size: 12px;
opacity: 0.5;
margin-top: 8px;
display: block;
"
>
Inter - Sans Serif
</span>
</div>
<div
style="
padding: 20px;
background: white;
border-radius: 8px;
"
>
<p
style="
font-family: Georgia, serif;
font-size: 24px;
margin: 0;
"
>
The quick brown fox jumps over the lazy dog
</p>
<span
style="
font-size: 12px;
opacity: 0.5;
margin-top: 8px;
display: block;
"
>
Georgia - Serif
</span>
</div>
<div
style="
padding: 20px;
background: white;
border-radius: 8px;
"
>
<p
style="
font-family: "Fira Code", monospace;
font-size: 24px;
margin: 0;
"
>
The quick brown fox jumps over the lazy dog
</p>
<span
style="
font-size: 12px;
opacity: 0.5;
margin-top: 8px;
display: block;
"
>
Fira Code - Monospace
</span>
</div>
</div>
</div>JavaScript API
Programmatic control of utility components.
JavaScript
<script>
// ClipboardHelper
import { ClipboardHelper } from 'stylescape';
// Copy text
ClipboardHelper.copy('Text to copy');
// Copy with callback
ClipboardHelper.copy('npm install stylescape', {
onSuccess: () => showNotification('Copied!'),
onError: (err) => showNotification('Failed to copy')
});
// Copy element content
const codeBlock = document.querySelector('code');
ClipboardHelper.copyElement(codeBlock);
// FetchClient
import { FetchClient } from 'stylescape';
const api = new FetchClient({
baseUrl: '/api',
headers: {
'Content-Type': 'application/json'
},
csrfToken: document.querySelector('meta[name="csrf-token"]')?.content
});
// GET request
const users = await api.get('/users');
// POST request
const newUser = await api.post('/users', {
name: 'John',
email: 'john@example.com'
});
// With loading state
api.post('/data', payload, {
onStart: () => showLoading(),
onComplete: () => hideLoading(),
onError: (err) => showError(err.message)
});
// GridLayerToggle
import { GridLayerToggle } from 'stylescape';
const gridToggle = new GridLayerToggle({
persist: true,
layers: ['columns', 'baseline', 'spacing']
});
gridToggle.show('columns');
gridToggle.hide('baseline');
gridToggle.toggle('spacing');
gridToggle.isVisible('columns');
// Auto-initialization
import { initStylescape, registerComponent } from 'stylescape';
// Initialize all components on page load
document.addEventListener('DOMContentLoaded', () => {
initStylescape();
});
// Initialize specific elements
initStylescape(containerElement);
// Register custom component
registerComponent('my-component', MyComponentClass);
// Then use it in HTML
// <div data-ss="my-component" data-ss-my-option="value"></div>
</script>