Playground — JavaScript

JavaScript

Reactive store, data binding, typewriter, counter, reveal, marquee.

Reactive store + binding

DD.globalStore · data-dd-bind · data-dd-output
Live two-way binding — type in the field

Hello, World!

Dark: false

<!-- Two-way binding -->
<input data-dd-bind="userName" type="text">
<input data-dd-bind="isDark"   type="checkbox">

<!-- Output -->
<span data-dd-output="userName"></span>

<!-- Conditional -->
<div data-dd-if="isDark">Dark is on</div>

<!-- JS -- after divdrop.js -->
const store = DD.globalStore({
  userName: '',
  isDark: false
});
store.subscribe('isDark', v =>
  document.documentElement.setAttribute('data-dd-theme', v ? 'dark' : 'light')
);
Store & binding

Typewriter

dd-typewriter
Looping multi-phrase + once mode
Looping:

Once (AI style):

Your Design. Your Framework. Your Rules.

<!-- Looping -->
<dd-typewriter
  speed="120"
  pause="2200"
  phrases='["Build fast.","Zero deps.","Ship today."]'>
</dd-typewriter>

<!-- Once mode — AI typing, no loop -->
<dd-typewriter once="true">
  Types once and stops.
</dd-typewriter>
Typewriter

Counter

dd-counter
Count-up on scroll into view

0

Downloads

0

Uptime

0

JS modules

0

Dependencies

<dd-counter to="4200" suffix="+">0</dd-counter>
<dd-counter to="99"   suffix="%">0</dd-counter>
<dd-counter to="14.5" prefix="$" decimals="1">0</dd-counter>
<!-- Triggers on scroll into view -->
Counter

Reveal

dd-reveal
Scroll into view to trigger
fade
fly-left
zoom
blur
 
<dd-reveal effect="fade">…</dd-reveal>
<dd-reveal effect="fly-left">…</dd-reveal>
<dd-reveal effect="fly-right">…</dd-reveal>
<dd-reveal effect="zoom">…</dd-reveal>
<dd-reveal effect="blur">…</dd-reveal>

<!-- Stagger with delay -->
<dd-reveal effect="fade" style="--dd-reveal-delay:0ms">…</dd-reveal>
<dd-reveal effect="fade" style="--dd-reveal-delay:120ms">…</dd-reveal>
Reveal

Router + Actions

DD.router · DD.action
Usage reference 
<!-- After divdrop.js -->
DD.router({
  '/':           () => store.set('page', 'home'),
  '/about':      () => store.set('page', 'about'),
  '/users/:id':  ({ id }) => store.set('userId', id),
  '*':           () => store.set('page', '404'),
});

DD.navigate('/about');

<a data-dd-route="/about">About</a>

DD.on('dd:route', ({ path, params }) => console.log(path));

<!-- Actions -->
DD.action('user.save', (data, store) => {
  store.set('saved', true);
});
DD.dispatch('user.save', { id: 42 });

<button data-dd-on-click="user.save"
        data-dd-payload='{"id":42}'>Save</button>
Router