ScrollForge: Causal Graph Programming — unify state, logic, and style.

Made by Nasa Space Apps Contender 2025:
https://www.spaceappschallenge.org/2025/find-a-team/perseverance5/

TL;DR

• Paradigm: Causal Graph Programming (CGP) — you wire functions, not components; the framework auto-detects what each function needs and “snaps” it into a single causal graph (UI ⇄ logic ⇄ effects ⇄ style ⇄ backend).
• Three engines:
• ScrollMesh → component/templating via context auto-wiring (unlimited functions, zero manual wiring).
• ScrollScript → universal signal store (client + server) with actions, watchers, derived signals, time travel.
• ScrollWeave → logic-reactive styling (state/logic drives CSS & animations at runtime).
• Why now: less boilerplate, fewer classes/hooks/providers, more causality visibility.
• Showcase: real-time chat app in < 500 lines (HTML + JS + a tiny server).
• Use cases: dashboards, real-time apps, design systems that react to logic, compact full-stack prototypes.
• One-liner: ScrollForge – Causal Graph Programming: unify state, logic, style, and backend into one reactive graph.

What is “Causal Graph Programming”?

The short version:
Instead of pushing data through props and bouncing events back through callbacks (typical UI frameworks), CGP lets you register as many functions as you want. Each function declares its intent implicitly by its signature (parameters), and the engine auto-provides matching contexts:

1. ({ ...stateProps }) => ui → UI renderer (gets state)
3. (events, state) => { ... } → event logic
5. (state, weave) => { ... } → styling/animation driven by state
7. (state, effects) => { ... } → reactive effects
9. () => ({ ... }) → initial state provider (…and several more contexts, all optional.)

Order doesn’t matter. Wiring doesn’t exist. The framework assembles a causal graph out of your functions and keeps it live.

**

## Why this is different?

• No props drilling, no provider pyramids, no manual event buses.
• UI, logic, effects, and styles coordinate through shared, reactive signals (ScrollScript) and auto-wired contexts (ScrollMesh).
• Style is not static: ScrollWeave treats CSS as a live system, not a file.

**

The three engines (in one project)

**

1) ScrollMesh — recursive component assembly (auto-wiring):

Write components by passing functions. The engine reads signatures and provides what you need.

import { HTMLScrollMesh } from 'scrollforge/dist/mesh-full.browser.js';

const Counter = HTMLScrollMesh(
  // UI (gets state via destructuring)
  ({ count }) => `<button class="btn">Count: ${count}</button>`,

  // Logic (gets events + state)
  (events, state) => {
    events.on('click', '.btn', () => state.count++);
  },

  // Initial state
  () => ({ count: 0 })
);

Counter.mount('#app');

2) ScrollScript — universal data flow (signals, actions, derived):

Client and server share the same API. Signals update; watchers react; derived signals memoize computed values.

// Create global signals
app.Script.signal('messages', []);
app.Script.signal('username', '');
app.Script.watch('messages', (msgs) => console.log('Count:', msgs.length));

3)** ScrollWeave **— logic-reactive styling

Let state and logic shape style at runtime.

(state, weave) => {
  weave.when('.status',
    state.online,
    { background: 'rgba(76, 175, 80, .2)' },
    { background: 'rgba(244, 67, 54, .2)' }
  );

  // Micro-interaction
  weave.spring('.btn', { transform: 'scale(1.0)' }, { stiffness: 200, damping: 20 });
};

**The <500-line demo: real-time chat

Using this paradigm, we made a fully working chatapp in under 500 lines of code (present in the github repo at the end).

ScrollMesh Context Auto-Wiring - Deep Dive

The Revolutionary Breakthrough

ScrollMesh Context is the most powerful feature in ScrollForge. It allows you to pass UNLIMITED functions that automatically detect what they need and connect themselves.

How It Works

import { HTMLScrollMesh } from 'scrollforge/mesh';

const component = HTMLScrollMesh(
  function1,
  function2,
  function3,
  // ... add as many as you want!
);

The framework:

1. Reads each function's signature (parameters)
2. Detects what contexts each function needs
3. Automatically provides those contexts
4. Wires everything together
5. NO manual configuration required! ✨

The 8 Available Contexts:

Every function can request any of these contexts by adding them as parameters:

1. state - Reactive State Proxy
Get it by: Adding state as parameter
What you can do:

(state) => {
  // READ
  const count = state.count;
  const name = state.user.name;

  // WRITE (triggers re-render!)
  state.count++;
  state.user.name = 'Jane';

  // Deep updates work
  state.user.profile.settings.theme = 'dark';

  // Arrays
  state.items.push(newItem);
  state.items = [...state.items, newItem];
}

2. events - Event System
Get it by: Adding events as parameter
What you can do:

(events, state) => {
  // Listen to DOM events
  events.on('click', '.button', (e) => {
    state.count++;
  });

  events.on('input', '.search', (e) => {
    state.query = e.target.value;
  });

  // Custom events
  events.emit('customEvent', { data: 'value' });

  events.on('customEvent', (data) => {
    console.log('Event:', data);
  });

  // Remove listener
  events.off('click', '.button', handler);
}

3. effects - Side Effects
Get it by: Adding effects as parameter
What you can do:

(state, effects) => {
  // Watch state changes
  effects.when('count', (count) => {
    console.log('Count changed:', count);
    document.title = `Count: ${count}`;
  });

  // Watch with old value
  effects.when('status', (newStatus, oldStatus) => {
    console.log(`${oldStatus} → ${newStatus}`);
  });

  // Run once on mount
  effects.once('mounted', () => {
    console.log('Component mounted!');
  });

  // Async effects
  effects.when('userId', async (userId) => {
    const user = await fetchUser(userId);
    state.user = user;
  });
}

4. weave - Styling (ScrollWeave)
Get it by: Adding weave as parameter
What you can do:

(state, weave) => {
  // Apply styles
  weave.apply('.element', {
    background: 'blue',
    padding: '20px'
  });

  // Conditional
  weave.when('.button',
    state.isActive,
    { background: 'green' },
    { background: 'gray' }
  );

  // Animations
  weave.fadeIn('.modal', 300);
  weave.spring('.card', { transform: 'scale(1)' });
}

5. api - API Calls
Get it by: Adding api as parameter
What you can do:

async (state, api) => {
  // Fetch when signal changes
  api.when('userId', async (userId) => {
    const response = await api.fetch(`/api/users/${userId}`);
    const user = await response.json();
    state.user = user;
  });

  // Manual fetch
  const response = await api.fetch('/api/data');
  const data = await response.json();
  state.data = data;
}

6. storage - Persistence
Get it by: Adding storage as parameter
What you can do:

(state, storage) => {
  // Save
  storage.persist('settings', state.settings);

  // Load (async)
  const saved = await storage.load('settings');
  if (saved) state.settings = saved;

  // Remove
  storage.remove('settings');
}

WARNING: storage.load() is async - don't use in state function for initial load!

() => ({
  todos: JSON.parse(localStorage.getItem('todos') || '[]')  // Sync!
}),

(state, effects) => {
  effects.when('todos', (todos) => {
    localStorage.setItem('todos', JSON.stringify(todos));  // Save
  });
}

7. validate - Validation
Get it by: Adding validate as parameter
What you can do:

(validate) => {
  validate.rule('email',
    (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
    'Invalid email format'
  );

  validate.rule('age',
    (value) => value >= 18,
    'Must be 18 or older'
  );
}

8. analytics - Analytics Tracking
Get it by: Adding analytics as parameter
What you can do:

(state, analytics) => {
  analytics.track('buttonClicked', () => state.clickCount);

  analytics.track('pageView', () => ({
    page: state.currentPage,
    user: state.username
  }));
}

Auto-Detection Rules

The framework detects function type by its signature:

**Signature Detected As Gets**
({ count }) => ...  UI Function State (destructured)
(state) => ...  Logic/Effect    State proxy
(events) => ... Logic   Events
(events, state) => ...  Logic   Events + State
(state, weave) => ...   Styling State + Weave
(state, effects) => ... Effects State + Effects
(state, api) => ... API State + API
() => ({ ... }) State Provider  Nothing (returns state)
(state, events, weave, effects, api, storage, validate, analytics) => ...   All Contexts    All 8!

State Function Special Rules

Must have ZERO parameters and return object:

//  CORRECT
() => ({
  count: 0,
  user: { name: 'John' }
})

//  WRONG - has parameters
(someParam) => ({
  count: 0
})

// WRONG - doesn't return object
() => {
  const count = 0;
  // Missing return!
}

Can include special properties:

() => ({
  // Regular state
  count: 0,
  email: '',

  // Computed properties (auto-update!)
  computed: {
    doubleCount: (state) => state.count * 2
  },

  // Selectors (memoized)
  selectors: {
    evenCount: (state) => state.count % 2 === 0
  },

  // Middleware (intercept changes)
  middleware: {
    count: (oldValue, newValue) => {
      return newValue < 0 ? 0 : newValue;  // Prevent negative
    }
  },

  // Validation (runtime checks)
  validate: {
    email: (value) => /^[^\s@]+@[^\s@]+/.test(value) || 'Invalid email'
  },

  // Options
  immutable: true,  // Freeze state
  debug: {
    logChanges: true,
    breakOnChange: ['count']
  }
})

HTMLScrollMesh - Quick Reference

HTMLScrollMesh = ScrollMesh Context + HTML template strings

Basic Pattern:

import { HTMLScrollMesh } from 'scrollforge/mesh';

const App = HTMLScrollMesh(
  // UI - Write HTML directly
  ({ count }) => `<button>${count}</button>`,

  // Events
  (events, state) => {
    events.on('click', 'button', () => state.count++);
  },

  // State
  () => ({ count: 0 })
);

App.mount('#app');

All 8 Contexts Work Identically

HTMLScrollMesh has the SAME context auto-wiring as ScrollMesh:

• (events, state) → Events + State
• (state, weave) → State + ScrollWeave styling
• (state, effects) → State + Side effects
• (state, api) → State + API calls
• (storage) → Storage context
• (validate) → Validation
• (analytics) → Analytics
• () => ({ ... }) → State provider (zero params!)
• Same rules. Same auto-detection. Just HTML instead of JS objects.

HTML Features

({ items, isLoggedIn, user }) => `
  <!-- Conditionals -->
  ${isLoggedIn ? `<p>Hello ${user.name}</p>` : `<p>Login</p>`}

  <!-- Loops -->
  <ul>
    ${items.map(i => `<li>${i.name}</li>`).join('')}
  </ul>

  <!-- Expressions -->
  <p>Total: $${(price * quantity).toFixed(2)}</p>
`

Key Difference from ScrollMesh Context:

1. ScrollMesh                            HTMLScrollMesh
2. { tag: 'div', content: 'Hi' }     <div>Hi</div>
3. JS Objects                            HTML Strings

** Using ScrollWeave with HTMLScrollMesh**

The Pattern:

HTMLScrollMesh(
  // UI function
  ({ count }) => `<button class="my-btn">${count}</button>`,

  // Weave function - gets (state, weave) automatically!
  (state, weave) => {
    // Apply reactive styles based on state
    weave.when('.my-btn',
      state.count > 10,
      { background: 'green', fontSize: '2rem' },  // If count > 10
      { background: 'blue', fontSize: '1rem' }    // Else
    );
  },

  // Other functions...
  (events, state) => {
    events.on('click', '.my-btn', () => state.count++);
  },

  () => ({ count: 0 })
);

The framework automatically:

1. Detects (state, weave) signature
2. Provides state proxy + ScrollWeave instance
3. Styles update when state changes
4. Zero manual wiring! ✨

How It Works

HTMLScrollMesh(
  // Function with (state, weave) parameters
  (state, weave) => {
    // Framework provides:
    // - state: reactive component state
    // - weave: ScrollWeave instance (app.Weave)

    // Use state to drive styles
    weave.apply('.element', {
      color: state.isActive ? 'green' : 'gray',
      fontSize: state.count > 5 ? '2rem' : '1rem'
    });
  }
);

// Framework auto-detects parameter names!

Complete Example

const Counter = HTMLScrollMesh(
  // UI
  ({ count, isHigh }) => `
    <div class="counter">
      <h1 class="display">${count}</h1>
      <button class="increment">+</button>
      <button class="decrement">-</button>
      ${isHigh ? `<p class="warning">⚠️ High count!</p>` : ''}
    </div>
  `,

  // Weave - Reactive styling!
  (state, weave) => {
    // Style changes based on state
    weave.when('.display',
      state.count > 10,
      { 
        color: 'green', 
        fontSize: '4rem',
        fontWeight: 'bold'
      },
      { 
        color: 'blue', 
        fontSize: '2rem',
        fontWeight: 'normal'
      }
    );

    // Button styling
    weave.when('.increment',
      state.count >= 20,
      { background: '#ccc', cursor: 'not-allowed' },
      { background: '#4CAF50', cursor: 'pointer' }
    );

    // Animate warning
    if (state.isHigh) {
      weave.spring('.warning', {
        opacity: 1,
        transform: 'scale(1)'
      });
    }
  },

  // Events
  (events, state) => {
    events.on('click', '.increment', () => {
      if (state.count < 20) state.count++;
    });

    events.on('click', '.decrement', () => {
      if (state.count > 0) state.count--;
    });
  },

  // State
  () => ({
    count: 0,

    computed: {
      isHigh: (state) => state.count > 15
    }
  })
);

Counter.mount('#app');

State changes → Weave updates styles → UI reflects changes! ✨

Key Points

1. Get weave context: Add weave as parameter after state
2. Signature: (state, weave) => { ... }
3. Framework provides: Your app's app.Weave instance automatically
4. Use state: Access component state to drive styles
5. Reactive: Styles update automatically when state changes

That's it! Just add weave parameter and you get reactive styling!

Links:

• https://www.npmjs.com/package/scrollforge
• www.infernusreal.com -> Portfolio website

Thank you <3, also although I have tested all the features and examples I have shown and even used it to make many small samples, if you find any problems with it, kindly contact me through the number given in the portfolio website!

I am only 16 so hopefully I am not embarrassing myself here, I also just entered Nasa space apps challenge 2025 this year, you can find the link to that page here:

https://www.spaceappschallenge.org/2025/find-a-team/perseverance5/