Qlik Sense already ships with powerful, ready‑made visualizations. But sometimes you need just a bit more: a custom chart type, a tailored interaction, or an interface that mirrors your business process perfectly. That’s where Qlik Sense extensions come in.
In this guide, you’ll learn what Qlik Sense extensions are, when to build them (and when not to), how Qlik’s APIs fit together, and how to create, test, deploy, and maintain extensions using modern JavaScript. We’ll also cover best practices for performance, governance, and what to expect as the Qlik ecosystem evolves into 2026.
What is a Qlik Sense extension?
A Qlik Sense extension is a custom visualization (or component) that runs directly inside Qlik Sense apps, leveraging the associative engine and selection model. With an extension, you can:
- Render tailor‑made charts (e.g., Sankey, Gantt, small multipliers)
- Add custom interactions (brush, lasso, click‑to‑filter, tooltips)
- Integrate third‑party JS libraries (D3, Chart.js, ECharts, React, etc.)
- Align UX with your product or process
Extensions are configurable by business users through the property panel and can participate in Qlik’s selection state just like native charts.
When should you build an extension?
Build an extension if:
- You need a visualization that doesn’t exist natively
- You want pixel‑perfect UI aligned to your design system
- You need to call external services or custom logic on user actions
- You need to standardize a reusable component across many apps
Avoid building an extension if:
- A native visualization meets the need with minor styling
- The requirement is only embedding dashboards into a portal (use qlik‑embed or Capability APIs)
- Your use case is outside Qlik entirely (consider Nebula.js to use Qlik data and engine in standalone apps)
If you’re still choosing your BI stack, this side‑by‑side comparison can help: Qlik vs. Looker — which BI platform is right for your organization?. And if you’re evaluating the broader platform fit, see When Qlik Sense is the best choice for enterprise BI.
The Qlik API landscape (and which to use when)
- Engine API (JSON‑RPC via enigma.js): Low‑level access to the Qlik Associative Engine. Use for programmatic generation of data models, hypercubes, and advanced queries.
- Capability APIs (qlik.js): Classic way to embed Qlik objects and control navigation/selections in Client‑Managed environments; also usable with Qlik Cloud in some scenarios.
- qlik‑embed (modern embedding): Streamlined embed library for Qlik Cloud. Ideal for putting analytics into portals and web apps with minimal code.
- Visualization API: Create and manage built‑in visualizations programmatically.
- Extension/Backend APIs: Build custom objects, define property panels, request data from hypercubes, and participate in selections.
- Nebula.js (and supernova): Modern framework for building custom visualizations that can run inside Qlik Sense or in standalone web apps with engine connectivity.
Rule of thumb:
- Inside Qlik as a reusable chart? Build an extension (classic API or supernova).
- Outside Qlik in your own app? Use Nebula.js or qlik‑embed.
- Advanced data operations? Use Engine API via enigma.js.
Your first Qlik Sense extension: step‑by‑step
1) Prepare your environment
- Qlik Sense Cloud or Qlik Sense Enterprise (Client‑Managed)
- Node.js for bundling (optional but recommended)
- A code editor and browser dev tools
2) Create the extension manifest (.qext)
Every extension has a manifest file. Example MyKpiCard.qext:
`
{
"name": "My KPI Card",
"description": "A simple KPI card with threshold coloring",
"type": "visualization",
"version": "1.0.0",
"icon": "extension",
"author": "Your Team",
"keywords": ["kpi", "extension", "javascript"]
}
`
3) Define the main module (JavaScript)
Classic extensions follow an AMD pattern with require.js. Minimal structure:
`
define(["qlik"], function (qlik) {
"use strict";
return {
initialProperties: {
qHyperCubeDef: {
qDimensions: [],
qMeasures: [{ qDef: { qDef: "Sum([Sales])", qLabel: "Sales" } }],
qInitialDataFetch: [{ qTop: 0, qLeft: 0, qWidth: 2, qHeight: 50 }]
}
},
definition: {
type: "items",
component: "accordion",
items: {
measures: { uses: "measures" },
sorting: { uses: "sorting" },
appearance: {
uses: "settings",
items: {
color: {
type: "string",
ref: "props.color",
label: "Text Color (CSS)",
defaultValue: "#222"
},
threshold: {
type: "number",
ref: "props.threshold",
label: "Highlight Threshold",
defaultValue: 100000
}
}
}
}
},
paint: function ($element, layout) {
const value = layout.qHyperCube.qDataPages[0]?.qMatrix[0]?.[0]?.qNum ?? 0;
const color = layout.props?.color || "#222";
const threshold = layout.props?.threshold || 0;
$element.empty();
const container = document.createElement("div");
container.style.padding = "16px";
container.style.font = "600 28px/1.2 system-ui, sans-serif";
container.style.color = color;
container.textContent = value.toLocaleString();
if (value >= threshold) {
container.style.background = "rgba(0, 200, 83, 0.1)";
container.style.borderRadius = "8px";
}
$element.append(container);
return qlik.Promise.resolve();
},
support: { snapshot: true, export: true, exportData: true }
};
});
`
What’s happening:
- initialProperties defines a hypercube so your extension can request data.
- definition builds the property panel for business users (color, threshold).
- paint renders the KPI and uses layout (the evaluated hypercube) for data.
4) Work with data efficiently
- Use qInitialDataFetch only for small previews.
- For larger sets, page data with backendApi.getData().
- Compute sorting and limiting in the engine (qInterColumnSortOrder, qSuppressZero, qSuppressMissing) rather than in JavaScript.
5) Add interactions and selections
Extensions should play nicely with the Qlik selection model. For example, to select a value when a user clicks:
`
this.backendApi.selectValues(0, [row[0].qElemNumber], true);
`
- 0 is the dimension index.
- qElemNumber comes from the hypercube matrix for that row.
6) Use your favorite charting library
You can bundle D3, Chart.js, or ECharts with your extension. Avoid loading from external CDNs in production; package libraries locally to respect Qlik Cloud’s Content Security Policy.
7) Test, debug, and iterate
- Use the browser console and network tab to inspect layout and hypercube calls.
- Test with realistic data sizes to validate performance.
- Validate selections, responsiveness, and export capabilities.
8) Package and deploy
- Client‑Managed: zip the extension folder and import via the QMC (or drop in the Extensions folder for development).
- Qlik Cloud: upload the zipped extension in the Management Console under Extensions. Set trusted origins if your extension calls external APIs.
Example: A Top‑N bar chart with D3 (conceptual)
- In initialProperties, define one dimension (Product) and one measure (Sales).
- In the property panel, expose “Top N” as a number.
- In paint(), read the hypercube, slice the top N rows, and render an SVG bar chart with D3.
- On bar click, call backendApi.selectValues to filter the app.
This gives you a bespoke chart with full Qlik interactivity and a polished D3 UI.
Embedding: extensions vs. embedded analytics
- Inside Qlik apps: use extensions as reusable custom objects.
- Outside Qlik:
- qlik‑embed: simplest way to embed Qlik Cloud analytics into portals and web apps.
- Nebula.js: build custom visualizations that can run with engine connectivity in standalone apps or as supernova visualizations inside Qlik.
If your goal is real‑time, action‑oriented dashboards that drive decisions at the edge of operations, pair your approach with the principles of Operational BI.
Performance, UX, and maintainability best practices
- Data:
- Page large datasets; don’t fetch the universe in one go.
- Push calculations to the engine via measure expressions and sort orders.
- Use calculation conditions to prevent heavy renders until selections narrow the data.
- Rendering:
- Minimize DOM nodes; reuse elements between paints.
- Debounce resize and selection events.
- Prefer vector (SVG) for hundreds of marks; canvas/WebGL for thousands+.
- Packaging:
- Bundle third‑party libs locally; respect CSP.
- Version your extension (semver) and keep a changelog.
- UX:
- Provide clear empty states and loading indicators.
- Make the property panel intuitive with tooltips and sensible defaults.
- Ensure keyboard navigation and sufficient color contrast.
- Governance:
- Review extensions for security before promoting to production.
- Limit outbound network calls to approved domains.
- Back up and source‑control extension code.
Cloud vs. Client‑Managed: important differences
- Qlik Cloud:
- Strong CSP; bundle assets locally.
- qlik‑embed is recommended for external embedding.
- Extensions must be uploaded as zips via Management Console.
- Client‑Managed:
- Capability APIs are widely used for embedding.
- Files can be placed directly on the server during development.
- More control over server‑side configuration and whitelists.
What to watch in 2026
- Wider adoption of qlik‑embed for simplified, secure embedding in Qlik Cloud.
- Growth of Nebula.js supernova visualizations for reusable, modern components.
- Stronger guardrails around extension governance (CSP, code reviews, signing).
- Tighter integration patterns for “push‑to‑action” workflows that connect insights to operational systems.
Troubleshooting checklist
- The property panel isn’t saving values: verify definition refs match layout.props usage.
- Data is missing or inconsistent: inspect layout.qHyperCube and qDataPages and confirm paging.
- Click‑to‑select doesn’t work: verify qElemNumber and the correct dimension index.
- It works locally but not in Cloud: check CSP, remove CDN dependencies, and validate allowed origins.
Conclusion
Qlik Sense extensions let you meet the last mile of analytics—where standard charts aren’t enough and business context matters most. With a solid grasp of Qlik’s APIs, a clean extension structure, and attention to performance and governance, you can deliver immersive, interactive analytics that truly move the needle. If you’re still assessing platform fit, explore when Qlik Sense is the best choice for enterprise BI, and if you’re balancing embedded analytics vs. custom builds, weigh that against your needs for Operational BI at scale.
FAQs: Qlik Sense Extensions with JavaScript and Qlik APIs
1) What’s the difference between an extension and a mashup?
- Extension: a custom visualization (object) that runs inside Qlik Sense, configurable via the property panel, and fully participates in Qlik selections.
- Mashup: a standalone web page or app that embeds Qlik objects (and other content) using Capability APIs or qlik‑embed. Mashups orchestrate multiple objects and non‑Qlik content together.
2) Can I use React, Vue, or Svelte in a Qlik extension?
Yes. Many teams build extensions with modern frameworks. Bundle your framework code with a build tool (e.g., Vite, Webpack), export an AMD‑compatible module, and avoid loading from external CDNs—especially in Qlik Cloud due to CSP.
3) How do I handle large datasets without freezing the UI?
- Page data with backendApi.getData().
- Push aggregations and sorting to the engine via expressions.
- Use calculation conditions to block rendering until selections reduce volume.
- Consider canvas/WebGL for high‑density visualizations.
4) Do extensions work in the Qlik mobile app?
Yes. Extensions render in mobile contexts, but you must design for responsiveness:
- Use flexible layouts and CSS.
- Keep touch targets large.
- Test in both portrait/landscape modes.
5) How do I let users select data by clicking on my custom chart?
Use backendApi.selectValues(dimIndex, [qElemNumber], toggle). Retrieve qElemNumber from the hypercube matrix. This updates the global selection state and triggers other objects to recalc.
6) What’s the recommended way to embed analytics into a customer portal?
For Qlik Cloud, start with qlik‑embed. For Client‑Managed, Capability APIs are common. If you need custom visuals outside Qlik, use Nebula.js to render supernova visualizations in your app while connecting to the engine.
7) How do I deploy extensions in Qlik Cloud vs. Client‑Managed?
- Qlik Cloud: zip the extension and upload it in the Management Console under Extensions. Ensure any external calls target allowed origins.
- Client‑Managed: import via QMC or place the extension folder on the server (for dev); publish to streams for end users.
8) Are extensions officially supported?
Qlik enables extensions, but support for third‑party or custom code depends on your organization’s governance. Many enterprises allow extensions after security review. Use versioning, code review, and testing before production.
9) How do I localize labels and messages in my extension?
Expose captions and labels in the property panel and use Qlik’s translation infrastructure or your own i18n setup. Store strings in a dictionary and switch by app/tenant locale where possible.
10) What’s the difference between Capability APIs and qlik‑embed?
Both embed analytics into external apps:
- Capability APIs (qlik.js) are the classic approach, widely used in Client‑Managed deployments.
- qlik‑embed is a streamlined, modern embedding library designed for Qlik Cloud with simpler configuration, better security defaults, and faster time‑to‑value.
If you’re still comparing platforms or deciding how deep to go with customization, this practical guide can help: Qlik vs. Looker — which BI platform is right for your organization?.
