---
title: Schemax
url: 'https://www.twelvetone.tv/docs/developer-tools/vue-plugins/schemax'
markdown: 'https://www.twelvetone.tv/docs/developer-tools/vue-plugins/schemax.md'
date: '2026-09-25'
description: 'The Schemax plugin for Vue facilitates data creation, validation, data binding, processing, serialization, and UI generation. This helps connect data to components, the Vuex state, and the server. Our sc'
taxonomy:
  category:
    - docs
  devtype:
    - private
---

[](#)  [ Home ](https://www.twelvetone.tv/docs/)     [ Developer Tools ](https://www.twelvetone.tv/docs/developer-tools)     [ Vue Plugins ](https://www.twelvetone.tv/docs/developer-tools/vue-plugins)      Schemax    

The Schemax plugin for Vue facilitates data creation, validation, data binding, processing, serialization, and UI generation. This helps connect data to components, the Vuex state, and the server.

Our schema model is based on top of the official [*JSON Schema*](http://json-schema.org/draft-07/json-schema-release-notes.html) specification, with additional properties for specifying data sub-types, state paths, and UI hints.

A common workflow makes the schema the single point of truth. The state is then generated from the schema using provided tooling.

#### Table of Contents

- [Metadata Provided By The Schema](#metadata-provided-by-the-)
    - [Type Information](#type-information)
    - [SubTypes](#subtypes)
    - [Default Values](#default-values)
    - [Caption Hints](#caption-hints)
    - [Validation](#validation)
    - [Oracle Service Providers](#oracle-service-providers)
- [Items Missing From JSON Schema Specification](#items-missing-from-json-s)
    - [Caption](#caption)
    - [Store Path](#store-path)
    - [Subtypes](#subtypes-1)
    - [GUI Hints](#gui-hints)
    - [Order](#order)
    - [Exclude](#exclude)
- [Tools](#tools)
    - [Generate State From Schema](#generate-state-from-schem)
    - [Generate StateFactory From Schema](#generate-statefactory-fro)
    - [Generate Schema from State](#generate-schema-from-stat)
        - [What can be inferred](#what-can-be-inferred)
        - [What cannot be inferred](#what-cannot-be-inferred)
        - [Other issues](#other-issues)
    - [Schema Diff](#schema-diff)
- [Data Binding](#data-binding)
    - [Setting An Undefined Property At The State Path](#setting-an-undefined-prop)

# Metadata Provided By The Schema

## Type Information

A state object can give us hints about the type of each property when a property’s value is a string, number, or boolean. It also gives us a vague idea when assigning an object or array. No information is provided when the value is *null* or *undefined*.

```js
{
    aString:’abc’,
    aBoolean:true,
    aNumber:12,
    anArray:[1,2,3],
    anObject:{a:1},
    something:null,
    somethingElse:undefined
}
```

To describe this state, we create a schema.

```js
{
    type:’object’,
    properties:{
        aString:{
            type:’string’,
            default:’aString’
        }
    }
}
```

We can now generate our state module from the schema.

```bash
> node createStateFile('./MyState.schema.js')
```

This will create the file `MyState.js` exporting the state object and a createState() method.

## SubTypes

## Default Values

## Caption Hints

## Validation

The schema can be used to check field inputs in a client form, enforce state updates, or for checking data at the server.

roadmap: add validation features

## Oracle Service Providers

# Items Missing From JSON Schema Specification

## Caption

This represents the simple name of the . The default value is the *to-caption* representation of the object's property name.

## Store Path

This represents the dot-path into the store. The default value is the dot-path of the parent tree prepended to the object's property name.

## Subtypes

Each basic type (string, boolean, number, object, array, and null) can have subtypes. The first subtype is called type1, the second type2, etc. For example, an string has subtypes that include username, password, html, and multiline.

## GUI Hints

Additional hints used to create the correct UI widget.

- Boolean
- Width/Height
- Multiline

## Order

The order to present the properties in an editor.

## Exclude

Excluded items. Items an editor should not display, such as generated ids and binary fields.

# Tools

## Generate State From Schema

## Generate StateFactory From Schema

A state factory is useful for initializing and restoring the state to a default value. A fresh default value can also be used to detect changes.

## Generate Schema from State

### What can be inferred

strings boolean objects arrays numbers

### What cannot be inferred

caption subtypes (type1, type2, type3) anyOf oneOf allOf hints exclude

### Other issues

*null* values become objects with default of *null*. All object properties are added to the *required* array.

## Schema Diff

Calculate items in the schema that are not mapped in the state.

Calculate items in the state that are not mapped in the schema.

# Data Binding

## Setting An Undefined Property At The State Path

See [DotPath Mutations](https://www.twelvetone.tv/docs/developer-tools/vue-plugins/dot-path-mutations)

 [ ](https://www.twelvetone.tv/docs/developer-tools/vue-plugins/v-scroll-indicator) [](https://www.twelvetone.tv/docs/developer-tools/vue-plugins/popout)

---

## Navigation

- Parent: [Vue Plugins](https://www.twelvetone.tv/docs/developer-tools/vue-plugins.md)
- Previous: [v-scroll-indicator](https://www.twelvetone.tv/docs/developer-tools/vue-plugins/v-scroll-indicator.md)
- Next: [popout](https://www.twelvetone.tv/docs/developer-tools/vue-plugins/popout.md)