Counter

Render a button that when clicked, increments a value.

Features used in this example:

• Reading and writing values to properties (context.get and context.set).
• Render View elements using different frameworks.

Example

Vanilla

 

Simple counter button example without using any external libraries.

manifest.yaml

name: Counter (JavaScript)
description: An example using JavaScript and no framework to render a simple button that displays the number of times the button is clicked.
categories: starter/javascript,starter/vanilla
keywords: starter,javascript,vanilla,counter
icon: logos:javascript
environments: browser
sandbox: browser.shadow

properties.yaml

view:
  datatype: web-view
count:
  datatype: number
  description: The number of times the button has been clicked since this application was started. This represents using a simple Property in the Openexus system.
  default: 1

src/main.js

/**
 * An example using JavaScript and no framework to render a simple
 * button that displays the number of times the button is clicked.
 */

let button;

// Define a render function to return our HTMLElement to display.
function render() {
  // Create the element.
  button = document.createElement('button');

  // Populate the element.
  button.innerHTML = `Count is ${context.get('count')}`;

  // Openexus components use tailwind by default, but you can define CSS
  // classes and styles in your preferred manner.
  button.classList.add('bg-blue-500', 'hover:bg-blue-700', 'text-white', 'py-2', 'px-4', 'rounded');

  // For our button we want to mutate our count state when it is clicked.
  button.addEventListener('click', (value) => {
    context.set('count', context.get('count') + 1);
  });

  return button;
}

// Register to be notified when ((count)) changes.
context.subscribe('count', (value) => {
  if (button) button.innerHTML = `Count is ${value}`;
});

// Set our render function to the ((view)) property for rendering.
context.set('view', context.render(render));

React

 

Simple counter button example using React.

manifest.yaml

name: Counter (TypeScript React)
description: An example using TypeScript and the React framework to render a simple button that displays the number of times the button is clicked.
categories: starter/typescript,starter/react
keywords: starter,typescript,react,counter
icon: logos:react
compiler: react@19
environments: browser
sandbox: browser.shadow

properties.yaml

view:
  datatype: web-view
count:
  datatype: number
  description: The number of times the button has been clicked since this application was started. This represents using a simple Property in the Openexus system.
  default: 1

src/main.tsx

/**
 * An example using TypeScript and the React framework to render a simple
 * button that displays the number of times the button is clicked.
 */

// Import needed framework libraries.
import * as reactDom from 'react-dom/client';
import react from 'react';

// Import the openexus setup utility for the React framework.
import { setup } from 'openexus/react';

// Setup openexus to work with React.
setup(context, react, reactDom);

// Define our React component
function ReactComponent(): react.JSX.Element {
  // Creates a React state variable that is bound to the ((count)) property.
  const [count, setCount] = context.use('count');

  // Return our component's JSX.
  return (
    <button
      // For our button we want to mutate our count state when it is clicked.
      onClick={() => setCount(count + 1)}
      // Openexus components use tailwind by default, but you can define CSS
      // classes and styles in your preferred manner.
      class='bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded'
    >
      {`Count is ${count}`}
    </button>
  );
}

// Set our React component to the ((view)) property for rendering.
context.set('view', context.render(ReactComponent));

Vue

 

Simple counter button example using Vue.

manifest.yaml

name: Counter (TypeScript Vue)
description: An example using TypeScript and the Vue framework to render a simple button that displays the number of times the button is clicked.
categories: starter/typescript,starter/vue
keywords: starter,typescript,vue,counter
icon: logos:vue
compiler: vue@3
environments: browser
sandbox: browser.shadow

properties.yaml

view:
  datatype: web-view
count:
  datatype: number
  description: The number of times the button has been clicked since this application was started. This represents using a simple Property in the Openexus system.
  default: 1

src/VueComponent.vue

<script setup>
// Define our Vue component

// Creates a Vue state variable that is bound to the ((count)) property.
const countRef = context.use('count');

// For our button we want to mutate our count state when it is clicked.
function onClick() {
  countRef.value = countRef.value + 1;
}
</script>

<!-- 
  Openexus components use tailwind by default, but you can define CSS 
  classes and styles in your preferred manner.
-->

<!-- Return our component's JSX. -->
<template>
  <button @click="onClick" class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
    Count is {{ countRef }}
  </button>
</template>

src/main.tsx

/**
 * An example using TypeScript and the Vue framework to render a simple
 * button that displays the number of times the button is clicked.
 */

// Import needed framework libraries.
import * as vue from 'vue';

// Import the openexus setup utility for the Vue framework.
import { setup } from 'openexus/vue';

// Import our child vue component.
import VueComponent from './VueComponent.vue';

// Setup openexus to work with Vue.
setup(context, vue);

// Set our Vue component to the ((view)) property for rendering.
context.set('view', context.render(VueComponent));

Svelte

 

Simple counter button example using Svelte.

manifest.yaml

name: Counter (TypeScript Svelte)
description: An example using TypeScript and the Svelte framework to render a simple button that displays the number of times the button is clicked.
categories: starter/typescript,starter/svelte
keywords: starter,typescript,svelte,counter
icon: devicon:svelte
compiler: svelte@5
environments: browser
sandbox: browser.shadow

properties.yaml

view:
  datatype: web-view
count:
  datatype: number
  description: The number of times the button has been clicked since this application was started. This represents using a simple Property in the Openexus system.
  default: 1

src/main.tsx

/**
 * An example using TypeScript and the Svelte framework to render a simple
 * button that displays the number of times the button is clicked.
 */

// Import needed framework libraries.
import * as svelteStore from 'svelte/store';
import * as svelte from 'svelte';

// Import the openexus setup utility for the Svelte framework.
import { setup } from 'openexus/svelte';

// Import our child Svelte component.
import SvelteComponent from './SvelteComponent.svelte';

// Setup openexus to work with Svelte.
setup(context, svelte, svelteStore);

// Set our component to the ((view)) property for rendering.
context.set('view', context.render(SvelteComponent));

src/SvelteComponent.svelte

<script lang="ts">
  // Define our Svelte component

  // Creates a Svelte writable that is bound to the ((count)) property
  const countWritable = context.use('count');
  
  let count: number | undefined;
  
  // Register to be notified when ((count)) changes.
  countWritable.subscribe((value: number) => {
    count = value;
  });

  // For our button we want to mutate our count writable when it is clicked.
  function onClick(): void {
    countWritable.set(count + 1);
  }
</script>

<!-- 
  Openexus components use tailwind by default, but you can define CSS 
  classes and styles in your preferred manner.
-->

<!-- Return our component's JSX. -->
<button 
  on:click={onClick} 
  class='bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded'
>
  Count is {count}
</button>

Solid

 

Simple counter button example using Solid.

manifest.yaml

name: Counter (TypeScript Solid)
description: An example using TypeScript and the Solid framework to render a simple button that displays the number of times the button is clicked.
categories: starter/typescript,starter/solid
keywords: starter,typescript,solid,counter
icon: logos:solidjs-icon
compiler: solidjs@2
environments: browser
sandbox: browser.shadow

properties.yaml

view:
  datatype: web-view
count:
  datatype: number
  description: The number of times the button has been clicked since this application was started. This represents using a simple Property in the Openexus system.
  default: 1

src/main.tsx

/**
 * An example using TypeScript and the Solid framework to render a simple
 * button that displays the number of times the button is clicked.
 */

// Import needed framework libraries.import * as solidWeb from 'solid-js/web';
import * as solidWeb from 'solid-js/web';
import * as solid from 'solid-js';

// Import the openexus setup utility for the Solid framework.
import { setup } from 'openexus/solid';

// Setup openexus to work with Solid.
setup(context, solid, solidWeb);

// Define our Solid component
function SolidComponent() {
  // Creates a Solid signal that is bound to the ((count)) property.
  const [count, setCount] = context.use('count');

  return (
    <button
      // For our button we want to mutate our count signal when it is clicked.
      onClick={() => setCount(count() + 1)}
      // Openexus components use tailwind by default, but you can define CSS
      // classes and styles in your preferred manner.
      class='bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded'
    >{`Count is ${count()}`}</button>
  );
}

// Set our Solid component to the ((view)) property for rendering.
context.set('view', context.render(SolidComponent));