The one Framework you need
Functional
Predictable, code efficient and easily testable. Pure functions are the building blocks of oneJS. Fall in love with the functional programming paradigm
JS Only. Really
You can write your entire app in pure Vanilla JS or Typescript. That's right, not a single line of HTML, CSS or JSX needed. Can you believe it?
Cross Platform
Write the same code for web and native apps. Simplicity is our true cross platform weapon; reduce your effort and multiply your reach! Powered by React and React Native's new architecture
$ npx @onejs-dev/create-app
Our best publicity is our own code
State. Routing. Animations. Just 20 lines of code
import {app, read, update, readFlavor} from '@onejs-dev/core';
import {Text, View, Input} from '@onejs-dev/components';
/* State: Variable declaration ================================================================= */
const state = {name: 'World', home: {source: {url: '/'}}, about: {source: {url: '/about'}}};
/* App Component: Returns the structure to be rendered ========================================== */
const App = () =>
View({content: {h: 'stretch', v: 'top', direction: 'column', gap: 50}})([
View({content: {h: 'center', gap: 10}, self: {expand: 0}})([
Input({type: 'button', title: 'home', url: '/'}),
Input({type: 'button', title: 'about', url: '/about'})
]),
View({visible: read('home'), content: {h: 'center', direction: 'column', gap: 20}})([
Text({flavor: readFlavor('section')})(`Hello ${read('name')}!`),
Input({type: 'text', value: read('name'), onChange: update('name')})
]),
View({visible: read('about'), animation: {visible: ['subtle-in', 'subtle-out']}})([
Text({style: {textAlign: 'center', width: '100%'}})('Developed with ❤️ by oneJS')
])
]);
/* App Function: Renders the App Component in the screen ======================================== */
app({component: App, theme: {preset: 'oneJS'}, state: state});