In this tutorial we are creating spreadsheet website like Google Sheets and save data into database .We are using syncfusion spreadsheet library which is really cool , simple & free , they also have paid plans with more features .

First create django project & app.

Open file

Create Sheet model to save spreadsheet data

from django.db import models

class Sheet(models.Model):
name = models.CharField(max_length=200)
data = models.TextField(blank=True,null=True)

def __str__(self):

Now Run migrations & Create Super User
Run these commands to make migrations & create superuser
1. python makemigrations
2. python migrate
3. python createsuperuser

Now lets create our homepage , here we can create & open our sheets .

Open (App) file and create homepage view .
Import Sheet Model & Json

from django.shortcuts import render
from .models import Sheet
import json

def homepage(request):

if request.method == 'POST':
name = request.POST.get('name')

data = dict()
sheets = Sheet.objects.all()
data['sheets'] = sheets
return render(request,'homepage.html',data)

Now lets create our template for homepage

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<script src=""></script>

<div class="jumbotron text-center" style="background-color: white">
<h1>Create Sheet </h1>
<div class="container">

<div class="row">

<div class="col-sm-6">
<form method="post">{% csrf_token %}
<div class="form-group">
<label for="username_email">Enter the name of sheet</label>
<input required type="text" name="name" class="form-control" id="username_email">
<button type="submit" class="btn btn-primary">Create Sheet</button>


<div class="col-sm-6">
{% if sheets %}
{% for sheet in sheets %}
<p><a href="{% url 'sheet' %}">{{ }}</a> </p>
{% endfor %}
{% else %}
<p> No Sheet Available</p>
{% endif %}



Now Lets Create our Second page where we can view/edit/update our spreadsheet.


def sheet(request,id):
if request.method == 'POST':
sheet_data = json.loads(request.body)
data = Sheet.objects.get(id=id)
return render(request,'main.html',{'data':data})


<!DOCTYPE html>
<meta charset="UTF-8">

<!-- Essential Studio for JavaScript theme reference -->
<link rel="stylesheet" href="" />
<!-- jquery script -->
<script src=""></script>
<script src=""></script>
<script src=""></script>
<!-- jsrender script -->
<script src=""></script>
<!-- Essential JS UI widget -->
<script src=""></script>
<!--Add custom scripts here -->

.save-button {
margin-top: 10px;
font-size: 17px;
background-color: #0b93ff;
color: white;
width: 123px;
height: 38px;

<div id="Spreadsheet"></div>

<script type="text/javascript">
$(function () {
var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
excelObj.loadFromJSON({{ | safe}});

function SaveAsJSON() {
var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
window.excelData = excelObj.saveAsJSON();
type: 'post',
url: '',
dataType: 'json',
contentType: 'application/json',
success: function (data) {


<div align="center">

<input type="button" class="save-button" value="Save" onclick="SaveAsJSON()" />

Now Update your app with this

from django.urls import path
from . import views
urlpatterns = [


Demo Url