You can develop a blogger template from local server by switching to a custom JavaScript-based template.
One of the drawbacks is that you'll have to develop page-by-page, extracting the page data from the live blog which you want to test and develop locally. Another thing that might concern you is that your page template code could become too easy to copy, so you'll need to implement your own protection measures.
A Short Demo
Here’s what the project looks like in action. I have many files because there are custom build scripts for deploying the stylesheet and JavaScript. The starter code is much leaner.
Here's how it works:
First, you set up the blog template to serve template data for the JavaScript page builder.
Next, you download the page source of a page and place it in the project folder.
Next, you create a page template that reads the imported data.
After finishing the page template, you'll export the compiled template code and insert it into a reserved HTML widget in the live blog.
Attention! Before You Start ⚠
Don't forget to backup your blog before converting to the JavaScript-based template. Some changes might be irreversible.
Resource Links 🔗
All resource links in this posts. GitHub repository links are relative to the commit at the time of this post.
1. Apply New Template HTML
Attention: This may overwrite your widget settings.
First, replace your blog template with the the Starter Template.
Next, open Layout menu and you will be greeted with the following view. This is not the actual blog layout. It is arranged to make it easy for you to customize your blog.
 |
| JS starter template layout |
The starter template doesn't come with a default blog design. So your blog will be showing a blank page for now.
2. Displaying Some Content
Now, to display some content, follow the steps below:
Insert the builder script code to the Builder Script gadget:
<script>
.. paste builder.js here ..
</script>Insert the following script to the Runner Script gadget. This is required to execute the page builder script:
<script>
let app = appBuilder();
app.init();
</script>Insert the following sample page template to the Multi Items Templage gadget to display content of homepage:
<h1>Blog Title</h1>
<p>Blog description</p>
<!-- blog posts -->
<h2>Latest Posts</h2>
<b-widget id="Blog1" template="BlogWidget"></b-widget>
<!-- templates -->
<template id="BlogWidget">
<ul b-data="posts" b-template="PostWidget"></ul>
<br />
<a b-attr-href="newerPageUrl">Newer Post</a>
<a b-attr-href="olderPageUrl">Older Post</a>
</template>
<template id="PostWidget">
<li>
<div>
<a b-attr-href="url" b-data="title"></a>
</div>
<small b-data="date"></small>
</li>
</template>and another one for the Single Item Template gadget to display content of post page:
<div>
<a b-attr-href="blog.homepageUrl">Homepage</a>
</div>
<!-- blog posts -->
<b-widget id="Blog1" template="BlogWidget"></b-widget>
<!-- templates -->
<template id="BlogWidget">
<div b-data="posts" b-template="PostWidget"></div>
<br />
<a b-attr-href="newerPageUrl">Newer Post</a>
<a b-attr-href="olderPageUrl">Older Post</a>
</template>
<template id="PostWidget">
<h1 b-data="title"></h1>
<div>
Published at <span b-data="date"></span>
</div>
<div b-data="body"></div>
</template>Now publish some posts, then view your blog. It should now display some content. You can even start styling the blog by adding some CSS using the HTML gadget.
Next, we will bring the page template development to your local computer.
Attention: The guide ahead is still incomplete. You may want to revisit this post after a week or so.
3. Local Development Setup
Setup
Download or clone the Page Builder Project repository.
git clone https://github.com/tmpmachine/js-blogger-page-builder.git
cd js-blogger-page-builder
# (optional) checkout to a specific commit that I use for this post
git checkout ced0e32Next, install dependencies (you need node.js & npm already installed) and start the server.
npm iFinally, to start the development server:
npm run dev
# or
node serverYou can now visit the development server on http://localhost:4200/pages and open example.html. Also checkout template-code.md for template writing guide.
Setup Page Data
Each page template will try to get the page data from a file with the same name in the data directory. The included example expect a structure like this:
.
└── js-blogger-page-builder/
└── src/
├── page-data/
│ └── example.html
└── pages/
└── example.htmlNote: You should ignore the page data folder in .gitignore because it is only used to provide testing data and might bloat your repository.
You can set the data folder path and the data file path by updating the app builder script in your page template:
let app = appBuilder({
dataPath: '../page-data',
// use another file or default to current file name
// fileName: 'example.html',
});
app.init();Exporting Template
Visit one of the pages that you want to export.
Open browser console.
Enter one of the following depending on your workflow:
app.CopyTemplate()
// or download as html file
app.DownloadTemplate()Paste the copied template code into the HTML gadget for specific page template.
Notes
About Widget Data
For this JavaScript template, we format the widget data so that it can be processed by the page builder script. The format looks like this:
<template class='WidgetData' id='Global'>
<div>
<data key='blog.title'>XML Expr</data>
...
<data type='boolean' key='isPage'>false</data>
</div>
</template>Description:
<template class='widgetData' id='...'>
Define a data group.classattribute
Required. The valid value isWidgetData.idattributeRequired. To identify a data group.
<data>
Define a data within a group.keyattribute
The variable name used in JS template.typeattribute
The data type. Default: string. The value can bebooleanornode.
To get that result, grab a copy of example markup code for each gadget. You can browse the markup here: JS Template Default Markups.
Insert that into your blog template, then revert widgets (Revert widget to Default > select widgets > Revert Selected Widget). This will overwrite existing changes in the target widget.
https://www.blogger.com/rpc_relay.html https://www.blogger.com/comment/frame/220561901913020919?po=1579248851048409229&hl=en&saa=85391&origin=https://xmlexpr.blogspot.com&skin=contempo https://xmlexpr.blogspot.com/2025/09/blogger-template-on-localhost.html#comments https://i.ytimg.com/vi/k-OBxN7q1yA/default.jpg true