Datalog UI

Declarative UI, meet Declarative Data

// Already in the browser's scope
// import * as datalog from '@datalogui/datalog'

// Build our data tables
const Greetings = datalog.intoTable([
  { language: "en", greeting: "Hello" },
  { language: "es", greeting: "Hola" }
  // ...
])
const Nouns = datalog.intoTable([
  { language: "en", noun: "world" },
  { language: "es", noun: "todos" }
  // ...
])

// Query our data for English Greetings
const GreetingQuery = datalog.query(({ greeting, noun }) => {
  Greetings({ language: 'en', greeting })
  Nouns({ language: 'en', noun })
})

GreetingQuery.view().readAllData()

// Already in the browser's scope
// import * as datalog from '@datalogui/datalog'

// Build our data tables
const Greetings = datalog.intoTable([
  { language: "en", greeting: "Hello" },
  { language: "es", greeting: "Hola" }
  // ...
])
const Nouns = datalog.intoTable([
  { language: "en", noun: "world" },
  { language: "es", noun: "todos" }
  // ...
])

// Query our data for English Greetings
const GreetingQuery = datalog.query(({ greeting, noun }) => {
  Greetings({ language: 'en', greeting })
  Nouns({ language: 'en', noun })
})

GreetingQuery.view().readAllData()

Editable example code

Output

Click Run example to see the result.

Change Matters

DatalogUI queries work off of differences. They keep track of changes in your data and only run on those changes. Does your current state management library do that?

Minimize Re-Renders

You shouldn't have to remember what needs to be rerendered when some part of your state changes. And you shouldn't have to re-render the world in response to a small change. With DatalogUI, query the data you want and it'll notify you when the results for that query change.

Already works with your favorite UI framework

@datalogui/datalog is the core database. It works with React, React Native, and most other frameworks. Let DatalogUI manage the state, and use your favorite framework to draw.