How to embed a SQL dashboard in a React application?

To embed a SQL dashboard in a React application, you can use Draxlr. Draxlr provides ready-made embed code snippets for React (as well as HTML and Vue) that you can copy and paste directly into your application.

Steps to embed a Draxlr dashboard in React:

1. Connect your SQL database (PostgreSQL, MySQL, SQL Server, etc.) to Draxlr.
2. Build your dashboard using the no-code query builder or write SQL directly.
3. Open the Embed Settings panel for your dashboard.
4. Set allowed domains for security.
5. Configure filters, export options, colors, and header visibility.
6. Copy the React embed code snippet and add it to your component.

If each customer should only see their own data, use the backend API option with row-level security: your server requests the embed token with the customer's RLS group and attribute values (such as accountId), and Draxlr scopes every query to that customer's rows. Customers can't change those values from the frontend.

Deciding between a copy-paste snippet and a full SDK? See how iframe, web component, SDK, and API embedding compare in our guide to the best embedded analytics tools.

For database-specific walkthroughs, see how to embed a PostgreSQL dashboard, MySQL dashboard, or SQL Server dashboard in your app.