PLAINER · VIEW TEMPLATE
Custom task view template for Plainer
Custom focus canvas is a view written in HTML, CSS and JavaScript. It shows your open tasks as cards and lets you add and complete tasks on the same screen. Every part of it is editable, so it is also a starting point for a view of your own.
Use this template
Free, no account needed. Opens Plainer with an example plan and shows what the template adds before you install it. Sign in when you want to keep it.
MY WORKSPACEFocus canvas
3 openDrawn from the starter code. The cards show your own open tasks.
What it does
- Shows your open tasks as cards, with a count and each task’s day.
- An “Add a task” box creates a new task.
- A Complete button marks a task done.
- Runs in a sandboxed frame that cannot load outside resources, and refreshes when your tasks change.
What you get after installing
- Focus canvas.html
- Opens Tasks & projects.json as an HTML, CSS and JavaScript view.
Installed files are your own copies. Files that use your tasks, projects or goals keep using your existing content. Commands run only when you choose Run.
Who it is for
- People who want a view that no standard layout offers.
- Developers and tinkerers who like to build their own tools.
How to install it
- Select Use this template. Plainer opens with an example plan, no account needed.
- Check what the template adds, then choose Install my own copy. Without an account, it is saved in this browser.
- Sign in or create a free account to keep it. Your guest plan, with the template, moves into your account. Commands that use the assistant need the account.
Use this template
Free, no account needed. Opens Plainer with an example plan and shows what the template adds before you install it. Sign in when you want to keep it.
Public template contents
{
"collections": [],
"records": [],
"views": [
{
"id": "00000000-0000-4000-8000-000000000041",
"name": "Focus canvas",
"source": "items",
"layout": "custom",
"fields": [],
"descending": false,
"plannerLayout": "both",
"bindings": {},
"code": {
"html": "<main><header><div><small>MY WORKSPACE</small><h1>Focus canvas</h1></div><span id=\"count\" data-plainer-count></span></header><form id=\"capture\"><input id=\"title\" placeholder=\"Add a task…\" required><button>Add</button></form><section id=\"cards\" data-plainer-records></section><p id=\"message\" role=\"status\"></p></main>",
"css": ":root{color-scheme:dark;font:15px system-ui;color:#edf1f7;background:#101315}*{box-sizing:border-box}body{margin:0}main{padding:24px;max-width:1000px;margin:auto}header{display:flex;align-items:center;justify-content:space-between}h1{margin:6px 0 24px;font-size:30px}small{letter-spacing:.16em;color:#93b4e8}form{display:flex;gap:8px;margin-bottom:24px}input,button{font:inherit;border:1px solid #39414c;border-radius:10px;padding:12px;background:#1c232c;color:inherit}input{flex:1;min-width:0}button{cursor:pointer}form button{background:#307bf3}#cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.card{padding:18px;border:1px solid #2e3947;border-radius:16px;background:linear-gradient(135deg,#1a2637,#171c22);display:flex;flex-direction:column;gap:12px}.card h2{font-size:17px;margin:0;overflow-wrap:anywhere}.card span,#count{color:#9caec6}.card button{align-self:start;padding:7px 12px}#message{color:#a8b6ca}@media(max-width:500px){main{padding:16px}h1{font-size:25px}#cards{grid-template-columns:1fr}}body[data-plainer-surface=\"home\"] main{padding:10px}body[data-plainer-surface=\"home\"] :is(form,small,#message){display:none}body[data-plainer-surface=\"home\"] h1{font-size:14px;margin:0 0 8px}body[data-plainer-surface=\"home\"] #count{font-size:11px}body[data-plainer-surface=\"home\"] #cards{gap:5px;grid-template-columns:1fr}body[data-plainer-surface=\"home\"] .card{padding:7px;gap:4px;border-radius:6px;font-size:10px}",
"javascript": "// HTML, CSS and JavaScript are yours. Data stays in Plainer.\nconst cards = document.querySelector('#cards');\nasync function render() {\n const records = await plainer.getRecords('primary');\n const open = records.filter(r => !r.values.done);\n document.querySelector('#count').textContent = open.length + ' open';\n cards.replaceChildren();\n for (const record of open) {\n const card = document.createElement('article'); card.className = 'card';\n const title = document.createElement('h2');\n title.textContent = record.values.title || record.values.name || 'Untitled';\n const detail = document.createElement('span');\n detail.textContent = record.values.day || 'No date yet';\n card.append(title, detail);\n if (typeof record.values.done === 'boolean') {\n const button = document.createElement('button'); button.textContent = 'Complete';\n button.onclick = async () => {\n try { await plainer.updateRecord('primary', record.id, {done:true}); }\n catch(e) { document.querySelector('#message').textContent=e.message; }\n };\n card.append(button);\n }\n cards.append(card);\n }\n}\ndocument.querySelector('#capture').onsubmit = async e => {\n e.preventDefault();\n try {\n await plainer.createRecord('primary', {title:document.querySelector('#title').value});\n e.target.reset();\n } catch(e) { document.querySelector('#message').textContent=e.message; }\n};\nplainer.onChange(render);\nawait render();"
},
"filters": []
}
],
"commands": [],
"documents": [],
"folders": [],
"fileAppearance": {},
"attachments": []
}More templates
- Kanban board Your open tasks as cards in Ready, In progress and Blocked columns.
- Gantt chart and calendar Nested projects on a Gantt timeline above untimed tasks and a full-day calendar.
- Daily to-do list An ordered checklist for the day, with a separate list for computer and phone work.
- Weekly goals overview A summary of your weekly goals, grouped by done, each open to edit.