Skip to main content

DHTMLX Kanban. Import and export JSON example

Exporting and importing board data as JSON files enables offline backup, sharing board configurations between teams, and migrating data between environments. It's also useful for creating board templates that can be loaded on demand.

Live example​

const { Kanban } = kanban;
const board = new Kanban("#root", {
    columns,
    cards,
});

function handleExport(){
    board.export.json("kanban-data");
}
function handleImport(){
    const input = document.createElement("input");
  	input.type = "file";
  	input.onchange = e => {
    	const file = e.target.files[0];
    	const reader = new FileReader();
    	reader.readAsText(file, "UTF-8");
    	reader.onload = readerEvent => {
      		const content = readerEvent.target?.result;
        	if (content && typeof content === "string") {
        		const data = JSON.parse(content);
        		board.parse(data);
        	}
      	};
    };
    input.click();
}
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">

<style>
.dhx_sample-btn {
		margin: 4px;
	}
    .dhx_sample-controls {
        justify-content: start;
    }
</style>

<script>
const columns = [
		{
			label: "Backlog",
			id: "backlog",
		},
		{
			label: "In progress",
			id: "inprogress",
		},
		{
			label: "Testing",
			id: "testing",
		},
		{
			label: "Done",
			id: "done",
		},
	];
    
    const cards = [
		{
			id: 1,
			label: "Integration with Angular/React",
			priority: 1,
			color: "#65D3B3",
			start_date: new Date("01/07/2021"),
			users: [3, 2],
			column: "backlog",
			type: "feature",
		},
		{
			label: "Archive the cards/boards ",
			priority: 3,
			color: "#58C3FE",
			users: [4],
			progress: 1,
			column: "backlog",
			type: "feature",
		},
		{
			label: "Searching and filtering",
			priority: 1,
			color: "#58C3FE",
			start_date: new Date("01/09/2021"),
			users: [3, 1],
			progress: 1,
			column: "backlog",
			type: "task",
		},
		{
			label: "Set the tasks priorities",
			color: "#FFC975",
			start_date: new Date("12/21/2020"),
			users: [4],
			progress: 75,
			column: "inprogress",
			type: "feature",
			attached: [
				{
					isCover: true,
					coverURL: "../assets/img-1.jpg",
					previewURL: "../assets/img-1.jpg",
					url: "../assets/img-1.jpg",
					name: "img-1.jpg",
				},
			],
		},
		{
			label: "Custom icons",
			color: "#65D3B3",
			start_date: new Date("01/07/2021"),
			users: [3, 2],
			column: "inprogress",
			type: "task",
		},
		{
			label: "Integration with Gantt",
			color: "#FFC975",
			start_date: new Date("12/21/2020"),
			users: [4],
			progress: 75,
			column: "inprogress",
			type: "task",
		},
		{
			label: "Drag and drop",
			priority: 1,
			color: "#58C3FE",
			users: [3, 1],
			progress: 100,
			column: "testing",
			type: "feature",
		},
		{
			label: "Adding images",
			color: "#58C3FE",
			users: [4],
			column: "testing",
			type: "task",
			attached: [
				{
					isCover: true,
					coverURL: "../assets/img-2.jpg",
					previewURL: "../assets/img-2.jpg",
					url: "../assets/img-2.jpg",
					name: "img-2.jpg",
				},
			],
		},
		{
			label: "Create cards and lists from the UI and from code",
			priority: 3,
			color: "#65D3B3",
			start_date: new Date("01/07/2021"),
			users: [3, 2],
			column: "done",
			type: "feature",
		},
		{
			id: 5,
			label: "Draw swimlanes",
			color: "#FFC975",
			users: [2],
			column: "done",
			type: "feature",
		},
		{
			label: "Progress bar",
			priority: 1,
			color: "#FFC975",
			start_date: new Date("12/9/2020"),
			users: [1, 4, 3],
			progress: 100,
			column: "done",
			type: "task",
		},
	];
</script>

The code uses board.export.json("kanban-data") to download the board state as a JSON file. For import, it creates a file input programmatically, reads the selected file with FileReader, parses the JSON content, and loads it into the board with board.parse(data). The parse method replaces the current board data entirely with the imported dataset.

Solution overview​

  1. Export: call board.export.json("filename") to download the board state as a JSON file
  2. Import: read a JSON file via FileReader, parse it, and call board.parse(data)

Key points​

  • export.json downloads immediately: The method triggers a browser download with the specified filename. No server required
  • parse replaces all data: Importing overwrites the current board state completely. There's no merge option
  • Date serialization: JavaScript Date objects are serialized as ISO strings by JSON.stringify. After import they remain strings in the data store, but the rendering layer accepts both Date objects and date strings, so dates display correctly without any manual conversion
  • File input is transient: The demo creates the file input dynamically and triggers it via input.click(). No persistent file picker in the UI

API reference​

  • export.json: Exports board data as a downloadable JSON file
  • parse: Loads data into the board

Additional resources​