apprun_jsx`
const state = 'Hello World';
const view = state => <h3>{state}</h3>;
app.start(document.createElement('div'), state, view);
`
apprun_jsx`
const state = '';
const view = state => <>
<h3>Hello {state}</h3>
<div><input $oninput={oninput}/></div>
<br/>
</>;
const oninput = (_, e) => e.target.value
app.start(document.createElement('div'), state, view);
`
apprun_jsx`
const state = new Date();
const view = state => <h3>{state.toLocaleTimeString()}</h3>;
const update = {
timer: state => new Date()
}
window.setInterval(() => { app.run('timer') }, 1000);
app.start(document.createElement('div'), state, view, update);
`
apprun_jsx`
class Counter extends Component {
state = 0;
view = count => <button $onclick={state => state + 1}>
Clicks: {count}
</button>;
}
const element = document.createElement('div');
new Counter().start(element);
`
{apprun_jsx`
class Counter extends Component {
state = 0;
view = state => {
const add = (state, num) => state + num;
return <>
<h3>{state}</h3>
<button $onclick={[add, -1]}>-1</button>
<button $onclick={[add, +1]}>+1</button>
</>;
}
}
if(!window.customElements.get('a-counter')) app.webComponent('a-counter', Counter);
`
return html`<a-counter/>`
}
apprun_jsx`
class Home extends Component {
view = () => <div>Home</div>;
update = {'#Home': state => state };
}
class Contact extends Component {
view = () => <div>Contact</div>;
update = {'#contact': state => state };
}
class About extends Component {
view = () => <div>About</div>;
update = {'#about': state => state };
}
[About, Contact, Home].map(C => new C().start('pages'));
setTimeout(()=>app.run('#Home'));
const view = () => <div style={{padding:'20px'}}>
<div id="menus">SPA Example: {' '}
<a href="#Home" $onclick="#Home">Home</a>{' | '}
<a href="#contact" $onclick="#contact">Contact</a>{' | '}
<a href="#about" $onclick="#about">About</a></div>
<div id="pages"></div>
</div>
app.start(document.createElement('div'), '', view);
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
