Embed a builder page onto a regular custom web jinja template

[rulrok]

Hi, I just wanted to share what I was able to achieve on a custom app of mine.

I basically used the Builder for constructing simple pages, but embedding it onto the regular jinja template of a custom app.
The motivation in my case is to be able to create simple pages with easy. Also, the builder still lacks a proper header/footer/master solution. I was in a problematic situation where I would have to maintain a header/footer component in builder and have to edit/sync it to match the custom app web template.

Inside my custom app, I create a templates/generators/webpage.html file which will override the builder template.

I had to change the order of some elements slightly to make it work.

The most obvious problem is avoiding the styles of the website interfere with the builder's.

Since my use case is for very bare content pages, I was able to achieve this, with only one or two hiccups. I basically moved the reset style to the end of the template followed by the builder raw styles.

I briefly tried using an iframe with srcdoc and also trying some clever scss scoped rules to try to 'isolate' them, but I didn't get too far. Also, based from my previous experience, it is most likely doomed to fail on all edge-cases. But alas, maybe someone can come up with something clever.

If somehow it is still possible to evolve this idea, it could be really handy to integrate both frappe website module + builder.

{% extends base_template_path %}

{% block meta_block %}
	{% if base_url %}
	<base href="{{ base_url }}">
	{% endif %}
	<!-- meta block -->
	{% if disable_indexing %}
	<meta name="robots" content="noindex, nofollow">
	{% endif %}
	<!-- include meta block template -->
	{% include "templates/includes/meta_block.html" %}
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<!-- fonts -->
	{% for (font, options) in fonts.items() %}<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ font }}:wght@{{ ";".join(options.weights) }}&display=swap" media="screen">{% endfor %}
	{%- if custom_fonts -%}
	<style>{% for font in custom_fonts %}@font-face {font-family: "{{ font.font_name }}";src: url("{{ font.font_file }}");}{% endfor %}</style>
	{%- endif -%}
{% endblock %}

{% block favicon %}
<!-- Favicon block -->
<link rel="icon" href="{{ favicon_light or favicon or '/assets/builder/images/frappe_black.png' }}"
	media="(prefers-color-scheme: light)" />
<link rel="icon" href="{{ favicon_dark or favicon or '/assets/builder/images/frappe_white.png' }}"
	media="(prefers-color-scheme: dark)" />
{% endblock %}

{%- block head -%}
<!-- head block -->
	{% include "templates/includes/head.html" %}
{%- endblock -%}

{%- block head_include %}
<!-- block head include -->
	{{ head_include or "" }}
	{%- if _head_html %}
	<!-- safe head html -->
	{{ _head_html|safe }}
	{%-endif -%}
{% endblock -%}

{% block style %}
	{%- if styles -%}
		{% for style_path in styles %}
		<link rel="stylesheet" href="{{ style_path }}">
		{% endfor %}
	{%- endif -%}
	<link rel="stylesheet" href="/assets/builder/reset.css?v=1" media="screen">
	<style>
		p {
			line-height: initial;
		}
	</style>
	{{ style }}
{%- endblock %}

{% block content %}
<main class="container-fluid container-sm px-0">
	{{ content }}
</main>
{% endblock %}