Motor is now free and open source. Give us a ⭐ on Github!
Build Beautiful React Dashboards,
Powered by Qlik.
Motor is a React framework which enables the rapid development of custom dashboards, using Qlik's associative engine. Our headless API works with any UX framework and charting library.
Reasons You'll Love Motor
Headless APIs
Our APIs are headless, we simplify all interactions with Qlik's engine and you bring the UI.
Connect to Multiple Apss
Our APIs enable connection to multiple apps, from a single mashup.
Compatible with all Qlik Deployments
Motor supports all Qlik Sense deployment types.
How Motor Works
The New Way to Build Mashups
Motor is a React layer between the engine and your UI, which simplifies all interactions. Connect to engine, extract data, manage selections, apply filters and a lot more with our developer friendly React hooks and components.
Build and Deploy Fast
Reduced Code Maintenance
Bring your own UI
No Qlik API knowledge needed
What our Customers Think
"Motor has allowed us to truly leverage the best of Qlik and React!
Motor's simple hooks allow us to focus on creating beautiful analytics without having to battle with the intricacies of Qlik's own APIs. The team is also there to support us with any questions we have and to push new features.
Go Motor! 🚀 "
Harry Cheslaw
Co-Founder @ Autone
Motor in Action
The below example demonstrates how you can use Motor to connect a Chart.js Bar to the Qlik Engine. With Motor, you can easily to add more features like Selections and Data Export!
Chart.js Bar Chart Connected to Qlik Sense
import React from 'react'
import { useData } from '@motor-js/engine'
import { Bar } from 'react-chartjs-2'
const Chart = () => {
const colors = [
"#B03060",
"#FE9A76",
"#FFD700",
"#32CD32",
"#016936",
"#008080",
"#0E6EB8",
"#EE82EE",
];
const cols = [
{
qField: '[Category]',
qLabel: 'Category',
},
{
qField: '=sum(Quantity * Price)',
qLabel: 'Revenue'
}
];
// Extract data from the engine
const { dataSet, select } = useData({ cols })
const { data } = dataSet
const labels = data && data.map(c => c.Category)
const dataValues = data && data.map(c => c.Revenue)
const dataElemNumbers = data && data.map(c => c.elemNumber)
const chartData = {
labels,
datasets: [{
label: 'Chart.js Column Chart',
data: dataValues,
backgroundColor: colors,
borderColor: colors,
borderWidth: 1
}]
}
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
}
return (
<div>
<Bar data={chartData} options={options} />
</div>
)
}
export default Chart
FAQs
Ready to dive in?Get started for free or speak to an expert.
Build and deploy beautiful dashboard with all of the power of Qlik's associative engine. Get started by reading our documentation or get in touch for a demo. We are here to help you get up and running!
