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);
`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.