Boilerplate templates and setups for building custom HTML/JS interfaces inside Zoho Creator using the ZOHO JS SDK.
A clean, modern boilerplate for creating Zoho Widgets without any frameworks. Includes the ZOHO JS SDK initialization.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://js.zohostatic.com/creator/widgets/version/1.0/widgetsdk-min.js"></script>
<style>
body { font-family: 'Inter', sans-serif; padding: 20px; }
.card { padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<div id="app" class="card">Loading...</div>
<script>
ZOHO.CREATOR.init().then(function(data) {
// Widget is initialized
var queryParams = ZOHO.CREATOR.UTIL.getQueryParams();
// Example API Call
ZOHO.CREATOR.API.getAllRecords({
reportName: "All_Customers"
}).then(function(response) {
document.getElementById('app').innerHTML = "Loaded " + response.data.length + " records!";
});
});
</script>
</body>
</html>The core App.jsx setup required when building a Zoho Creator Widget using React and Vite.
import { useEffect, useState } from 'react'
function App() {
const [isInitialized, setIsInitialized] = useState(false)
const [records, setRecords] = useState([])
useEffect(() => {
// Ensure ZOHO is available on window
window.ZOHO.CREATOR.init().then(() => {
setIsInitialized(true)
// Fetch initial data
window.ZOHO.CREATOR.API.getAllRecords({
reportName: "Employee_Directory"
}).then((response) => {
setRecords(response.data)
})
})
}, [])
if (!isInitialized) return <div>Loading Widget Engine...</div>
return (
<div className="p-4">
<h1 className="text-xl font-bold">Widget Ready</h1>
<p>Found {records.length} records</p>
</div>
)
}
export default App