ardor-synapse

Ardor Synapse Bridge - A lightweight JavaScript bridge for Ardor platform integration.

Features

- 🔍 DOM Inspector - Visual element inspection and highlighting
- 📊 Console Capture - Intercept and forward console logs
- 🌐 Network Monitoring - Track fetch requests and responses
- 📏 Auto Height - Automatic iframe height adjustment
- 🌳 DOM Tree - Serialized DOM tree for visualization

Installation

$3

``bash
bun add ardor-synapse
`

$3

`bash
npm install ardor-synapse
`

$3

`bash
yarn add ardor-synapse
`

$3

`bash
pnpm add ardor-synapse
`

Usage

$3

Import and initialize when you need it:

`javascript
// In your main application file
import synapse from 'ardor-synapse';

// Initialize when ready (e.g., after DOM is loaded)
synapse.init();

// Or use named imports
import { init, toggleInspector, destroy } from 'ardor-synapse';

init();

// Later, toggle inspector
toggleInspector(true);

// Cleanup when done (optional)
destroy();
`

$3

`tsx
import { useEffect } from 'react';
import synapse from 'ardor-synapse';

function App() {
useEffect(() => {
// Initialize on mount
synapse.init();

// Cleanup on unmount
return () => {
synapse.destroy();
};
}, []);

return

;
}
`

$3

`javascript
import synapse from 'ardor-synapse';

// Only initialize in development or specific conditions
if (import.meta.env.DEV || process.env.NODE_ENV === 'development') {
synapse.init();
}

// Or conditionally based on URL parameter
if (new URLSearchParams(window.location.search).has('ardor')) {
synapse.init();
}
`

$3

`javascript
// Load only when needed
async function loadArdorSynapse() {
const synapse = await import('ardor-synapse');
synapse.default.init();
}

// Call when needed
loadArdorSynapse();
`

$3

For projects that don't support ES modules, you can still use the script tag:

`html












`

Or copy to public and use:

`bash
cp node_modules/ardor-synapse/dist/synapse.js public/synapse.js
`

`html


`

API

$3

`javascript
import synapse, { init, destroy, toggleInspector } from 'ardor-synapse';

// Initialize the bridge
init();

// Toggle inspector mode
toggleInspector(true); // Enable
toggleInspector(false); // Disable

// Check if initialized
console.log(synapse.isInitialized); // true/false

// Get version
console.log(synapse.version); // "2.4.0"

// Cleanup (optional, removes all listeners and observers)
destroy();
`

$3

The bridge also exposes a global window.__ARDOR__ object for backward compatibility:

`javascript
// After importing and initializing
window.__ARDOR__.toggleInspector(true); // Enable
window.__ARDOR__.toggleInspector(false); // Disable
window.__ARDOR__.init(); // Initialize
window.__ARDOR__.destroy(); // Cleanup
`

$3

The bridge communicates with parent windows using postMessage:

Outgoing Messages:
- BRIDGE_READY - Sent when bridge initializes
- RESIZE - Sent when iframe height changes
- DOM_TREE_UPDATE - Sent when DOM structure changes
- CONSOLE_LOG - Sent for console messages
- NETWORK_LOG - Sent for network requests
- ELEMENT_SELECTED - Sent when element is clicked in inspector mode

Incoming Messages:
- TOGGLE_INSPECTOR - Enable/disable inspector mode
- HIGHLIGHT_NODE - Highlight a specific DOM node
- UPDATE_STYLE - Update element styles
- PING` - Request handshake

Browser Support

- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)

Version

Current version: 2.4.0

License

MIT

Links

- GitHub Repository
- npm Package