Export HTML in format similar to LEO desktop

[brian]

Is there a way to export an outline in an html format where the format of the html is similar to the desktop version of Leo with the expands and collapses.  I want to send someone a copy of my outline that they can use in a browser to view.  This is view only.    

I tried the plugin leo to html but it seems that this is for an outline that was written as html.  

I tried RST3 but the html is all on the left margin and I’m getting weird error messages.  

I read about rendered view exporting as html but I couldn’t get the html to be export.  

I saw a JS port of leo for the web but I suspect I’l have to host a version.  I just want to send an html document that everyone can use out of the box.  

It looks like I’ll have to write a plugin.  Would RST3 be the best place to start?  

Brian  

[Thomas Passin]

You haven't explained how you want your users to interact with the outline. Should they be able to edit, create, and destroy nodes?  Or do you want them to only be able to read it.  Do you want subtrees to be able to collapse and expand as they can in Leo?

Do you want to be able to export arbitrary outlines, or would you be satisfied with some specialized kind?  For example, you can create a very good documentation-like set of HTML pages by using Sphinx, but you have to write the outline in ReStructuredText (RsT) and run the rst3 command on it first. BTW, rst3 will not create an HTML document in itself.  It creates a set of nodes into linked RsT files, which can then be transformed into an HTML version.

If you don't mind using just a little RsT or Markdown in your nodes, you can produce very good HTML output using the Viewrendered3 (VR3) plugin. VR3 can export a node or an entire tree to very readable HTML, but it won't have Leo's interactivity.

Unfortunately, Leo's export-xxx commands seem to only export a view of the outline, without the node content.

So please think some more about what you want to accomplish with an export. If you were thinking of sending a set of HTML files and viewing them in a browser with full Leo capability, that would require re-creating full Leo capability in javascript. Felix has done that with LeoJS except that it's running in Visual Studio Code instead of a browser.  

[Thomas Passin]

I posted the last message before I was finished.  I meant to add that the effort of reproducing Leo in a browser, similar to what Felix has done with LeoJS, is an enormous years-long effort, so don't plan on doing that in a plugin anytime soon.

[brian]

I don't want the person to be able to modify the outline.  That is what I meant by "read only".  I want someone to view a representation in a browser that is similar to how it looks in the installed version of Leo and without having to install the leo executable.  I do want expand and collapse.  I know how to create expand and collapse in html but I'm not sure how to get the content out of Leo.  

I looked at LeoJS and didn't consider because it can only be used in VS code.  I want to send someone a self contained html file they can double click on and view in the browser.  

I'm only concerned about exporting the outlines I create.  My outlines mostly have text but a few nodes have markdown.  

I'm not sure what you mean by "write the outline in RsT" and run rst3.  When I ran Rst3, all the content in the html was on the left margin and it got confused about some of the node headlines (e.g., something like "I.  Learn about leo").  I don't want a lot of constraints on the outlines I create.  I'm fine with minor edits but I don't want have to rework every node.  After trying Rst3, I assumed it could not do the task.  If rst3 can do this, I'd rather not write a plugin.  Can you point me in the right direction to get rst3 to do what I want?  

I looked at VR3 and I could figure out how to export my entire outline.  The documentation I found was sparse and I didn't dig into the source code.    

I've written the HTML with a hard coded outline where nodes will expand and collapse (used Bootstrap).  I just need to get my data out of Leo and into my html.  I planned on using the Django template engine to generate the html.  I assumed this would be an easy task.  LeoJS is a huge undertaking.  It seems tweaking rst3 to export to the Django template engine would be simple tweak of rst3.  If I'm missing something, let me know.    

I'm looking for the easiest path to go from my Leo outline to html in a format I want.         

[brian]

Also, I want some way to add tags in the outline that will get included in the html.  For example, tool tip.

[Thomas Passin]

On Wednesday, September 3, 2025 at 11:23:48 AM UTC-4 brian wrote:

I don't want the person to be able to modify the outline.  That is what I meant by "read only".  I want someone to view a representation in a browser that is similar to how it looks in the installed version of Leo and without having to install the leo executable.  I do want expand and collapse.  I know how to create expand and collapse in html but I'm not sure how to get the content out of Leo.  

Getting output from Leo is easy.  You walk the tree and for each node output headline and body text with whatever format you like.  The hard part is working out what the HTML should be, including how to manage and display the nesting level.

 ...

> I'm only concerned about exporting the outlines I create.  My outlines mostly have text but a few nodes have markdown.  

Do you want those markdown nodes to look as they do in the body editor, or do you want them rendered by a Markdown processor?

>  I'm not sure what you mean by "write the outline in RsT" and run rst3.  When I ran Rst3, all the content in the html was on the left margin and it got confused about some of the node headlines (e.g., something like "I.  Learn about leo").  I don't want a lot of constraints on the outlines I create.  I'm fine with minor edits but I don't want have to rework every node.  After trying Rst3, I assumed it could not do the task.  If rst3 can do this, I'd rather not write a plugin.  Can you point me in the right direction to get rst3 to do what I want?  

The rst3 command is oriented to creating an overall tree of RestructuredText (RsT) files in a form that Sphinx will be able to process to produce a set of documentation files, which are usually HTML but could also be pdf or other formats. The command by itself isn't going to create a nice finished HTML file. For this to make sense, the nodes in an @rst tree need to be written using RsT (Sphinx can be made to use Markdown files too, but the rst3 command only knows about RsT).

> I looked at VR3 and I could figure out how to export my entire outline.  The documentation I found was sparse and I didn't dig into the source code.    

VR3 renders the tree's body, creating headlines using the text of each node's headline. It sounds like you want to include an outline panel, and VR3 won't do that.

> I've written the HTML with a hard coded outline where nodes will expand and collapse (used Bootstrap).  I just need to get my data out of Leo and into my html.  I planned on using the Django template engine to generate the html.  I assumed this would be an easy task.  LeoJS is a huge undertaking.  It seems tweaking rst3 to export to the Django template engine would be simple tweak of rst3.  If I'm missing something, let me know.    

As I said, you walk the tree of nodes in your outline, and output whatever you want based on the output format you want to create.  Walking the tree is easy. I've never used Django templates and I don't know what they should look like. To process the tree starting at the currently selected node (c.p), your script could look like this:

    for p1 in c.p.subtree():

        headline = p1.h

        text = p1.b

        # Do something with the the headline and text

        # Indentation level is p1.level()

> I'm looking for the easiest path to go from my Leo outline to html in a format I want.         

... It looks like I’ll have to write a plugin.  Would RST3 be the best place to start?  

You don't need a plugin, as best I can see, certainly not for experimenting until you can produce what you want.  You only need a Leo script, which you can attach to a button. Then select the top node you want to start from, and press the button to run the script. You could develop the whole thing in Leo's workbook. 

As I said, the hard part is figuring out what the output should look like. Anything that links two different nodes together is going to be harder.  Anything that assembles several pieces of information (like tooltips that can optionally be made visible ) is going to be harder.  But those are not Leo issues. They are format and output issues.  That's what you need to figure out first.

[jkn]

ISTM that the OP just wants a 'style' of HTML output that will be rendered with output text optionally expanded or collapsed, according to where a viewer might click on the rendered output.

This is often seen in modern web pages when looking at code-oriented content. I haven't got an example to hand, but one should be easy to find.

I'd have thought the main issue was understanding how such HTML/CSS(+Javascript?) works ... once that is done, actually creating the exporter should be fairly easy.

Just my $.02 ...

    J^n

[jkn]

This sort of thing, perhaps:

https://stackoverflow.com/questions/5636375/how-to-create-a-collapsing-tree-table-in-html-css-js

[Edward K. Ream]

On Tue, Sep 2, 2025 at 11:15 PM brian <yakka...@gmail.com> wrote:

Is there a way to export an outline in an html format where the format of the html is similar to the desktop version of Leo with the expands and collapses.  I want to send someone a copy of my outline that they can use in a browser to view.  This is view only.    

I tried the plugin leo to html but it seems that this is for an outline that was written as html.

I strongly recommend running vs-code (or vscode.dev) with the LeoJS plugin installed. Using vscode.dev is a quick (zero install!) solution. LeoJS is what you want. Imo, you are wasting your time doing anything else.

Edward

 

I tried RST3 but the html is all on the left margin and I’m getting weird error messages.  

I read about rendered view exporting as html but I couldn’t get the html to be export.  

I saw a JS port of leo for the web but I suspect I’l have to host a version.  I just want to send an html document that everyone can use out of the box.  

It looks like I’ll have to write a plugin.  Would RST3 be the best place to start?  

Brian  

--
You received this message because you are subscribed to the Google Groups "leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leo-editor+...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/leo-editor/4c3aa801-903b-4150-b50b-3d0cf3a193a4n%40googlegroups.com.

--

-----------------------------------------------------------------

Edward K. Ream: edre...@gmail.com

Leo Editor: https://leo-editor.github.io/leo-editor/

-----------------------------------------------------------------

[Thomas Passin]

The OP wrote that he knows how to make collapsing outline-style lists. I used to make them with nested UL lists, formatted with CSS to automatically apply the indentation.  The CSS can also be used to provide vertical guide lines for the indent level.  IMO, one doesn't need to import packages or use templates to do the job, but everything depends on the detailed things the OP wants to do. I used frames to contain the left and right panels, but that, I know, is considered old fashioned.

Once you have the expandable outline under control, the next thing to solve is how to link a click on an outline node with the display of its contents. It's not hard, but you do need to figure it out.

Then you may want a search function ...

[brian]

I attached a sample leo file and the desired html output.  I'm not sure the best way to add tool tips, title, and sub-title in leo.  My actually leo file that I want to generate the html for caused  RST3 to generate errors.  

@tbp1

I envision running every node body through markdown render.  Thank you for the snippet of code.  The code will get me started.     

@edward 

My goal is to generate a self contained html file that I can send to someone so they can view the content I created without installing leo.  I'm using leo as an outlining tool and not as a software development tool.  With the html someone can double click the html file and view a representation of the outline in a browser.  Some people have issues with installing software so I'm trying to avoid forcing someone to install leo.  Some businesses require IT sign off before even thinking about installing software.  Having to install leo could be a blocker.  LeoJS  will not work since it has to be setup with VS code.  It is easier for someone to install leo than setup LeoJS with VS code.  A non-dev will be lost in VS code.    

My plan is to use leo to quickly create prototype variations and then if the idea gets traction, rewrite in an actually web app.  I'm debating if it is easier to go straight to the web app.  I'm going on using leo 20 years and I love organizing content with it.  I use leo daily to organize my notes.        

[Thomas Passin]

All right, that looks simple enough.  You just have to track the nesting level and back out of it when the level decreases - emit a <div> when the level increases (which will always be by 1) and emit a </div> for each decrease in the node level (the decrease might be any number of steps). Forget rst3.  It's not designed to do anything like this. Just walk the tree and emit the corresponding HTML, which you have already designed. Since everything will happen in order, you will have almost no complications, expect maybe for the tool tips.  I don't know if they are tied to nodes or function/method names.

If you decide you want to render markdown that may be in some nodes, look at the code in plugins/viewrendered3.py, the part where it converts the markdown to HTML. It should give you a head start.

If and when you do start writing your web apps, you can write them in Leo outlines. As a 20-year Leo user I suppose that's what you would automatically think about doing.

[Edward K. Ream]

On Wed, Sep 3, 2025 at 9:32 PM brian <yakka...@gmail.com> wrote:

 

@edward 

My goal is to generate a self contained html file that I can send to someone so they can view the content I created without installing leo.  I'm using leo as an outlining tool and not as a software development tool.  With the html someone can double click the html file and view a representation of the outline in a browser.  Some people have issues with installing software so I'm trying to avoid forcing someone to install leo.  Some businesses require IT sign off before even thinking about installing software.  Having to install leo could be a blocker.  LeoJS  will not work since it has to be setup with VS code.  It is easier for someone to install leo than setup LeoJS with VS code.  A non-dev will be lost in VS code.    

My advice is to use vscode.dev if at all possible.

Edward

[Thomas Passin]

With LeoJS in vscode.dev, outlines have to be in a GitHub repository.  The OP probably doesn't want to be limited like that. 

[Félix]

Hi Brian. Great question. Indeed your concept could be very useful. I'll try my hand at it this week-end. 

And yes leojs is great, but like Thomas said, it's a full fledged leo that is not a minimal html readable tree that you would like

Thanks for your interest in Leo 😃

Hopefully ill get something that would fit the bill in a few days when i have some free time

Félix

[jkn]

Hi Felix - whilst you are here...

I was reminded about LeoJS by Thomas' comment, and also: "With LeoJS in vscode.dev, outlines have to be in a GitHub repository"

OOI, does it have to be in Github (only)? eg. could an outline be in Gitlab, for instance?

Thanks a lot

    J^n

[Thomas Passin]

vscode.dev doesn't offer any control or menu to open a project except in GitHub or some equivalent Azure system. It seems to be very closely tied to GitHub.  However, if there is a Leo outlne in a GitHub project, you can open it in LeoJS without explicitly going through vscode.dev. You click on the file, which brings up a browser view in GitHub. There is a pencil icon for more edit options. One of these is for github.dev. This is actually a version of vscode.dev.  When it opens, you can install the leoJS extension and then open any Leo outline in the repo in leoJS.

[Edward K. Ream]

On Thursday, September 4, 2025 at 1:36:05 PM UTC-5 Félix wrote:

Hi Brian. Great question. Indeed your concept could be very useful. I'll try my hand at it this week-end. 

And yes leojs is great, but like Thomas said, it's a full fledged leo that is not a minimal html readable tree that you would like

Thanks for your interest in Leo 😃

Félix, there is no one but you I would trust with such a project. Only you have the deep knowledge of Leo, your LeoJS scripts, and web technology that would be required for such a project.

But does the OP's request make sense? Isn't  possible malware another name for an .html file? How will distributing Leo outlines as .html files pass the first security sniff test?

Edward

[Thomas Passin]

On Friday, September 5, 2025 at 3:56:24 AM UTC-4 Edward K. Ream wrote:

Félix, there is no one but you I would trust with such a project. Only you have the deep knowledge of Leo, your LeoJS scripts, and web technology that would be required for such a project.

But does the OP's request make sense? Isn't  possible malware another name for an .html file? How will distributing Leo outlines as .html files pass the first security sniff test?

It seems to me that the display of an outline should be read-only, with a few interactive features like expanding nodes. That way the user doesn't need to learn anything special. Security aside, this brings in the tricky question about how to handle @other trees in a way that a user can understand without climbing a learning curve. Named sections don't present a problem, I think.  I'm also sure that sentinels should not be visible.  I don't know where that leaves Leo directives.

Security might be a real concern.  OTOH, a Leo outline running in Leo could also be a security concern - it could modify a standard Leo command to do something nefarious. For myself, I use a javascript blocker in my browser. It would be best if the read-only representation of a Leo outline wouldn't need to import any script packages, for then a script blocker won't need to be told to make an exception, which once again could become a security matter.

[Edward K. Ream]

On Friday, September 5, 2025 at 8:09:05 AM UTC-5 Thomas wrote:

It seems to me that the display of an outline should be read-only, with a few interactive features like expanding nodes. That way the user doesn't need to learn anything special. Security aside, this brings in the tricky question about how to handle @other trees in a way that a user can understand without climbing a learning curve. Named sections don't present a problem, I think.  I'm also sure that sentinels should not be visible.  I don't know where that leaves Leo directives.

 This seems straightforward, and it would be tempting to charge ahead with coding.

Security might be a real concern.

 Unless I misunderstand the OP, security is the only concern. Otherwise, people could just install Leo or LeoJS.

Before discussing this topic further,  I recommend that Brian consult with management what would be acceptable. Unless then, our discussions lack direction. I don't envy anyone trying to keep a company's computers free from malware. I would clear any plan first.

OTOH, a Leo outline running in Leo could also be a security concern

Absolutely! As I write this, I see that Leo should have an info item about security. The general rule is:

    Be wary of receiving a .leo file from anyone you don't know and trust.

Leo prevents any outline except myLeoSettings.leo from setting @bool scripting-at-script-nodes = True.

I thank Paul Patterson for pointing out the danger.

But Leo can do nothing to prevent the unwary from foolishly clicking a button in an outline from an unknown source. In this sense, passing .leo files around should be a real security concern.

- it could modify a standard Leo command to do something nefarious. For myself, I use a javascript blocker in my browser. It would be best if the read-only representation of a Leo outline wouldn't need to import any script packages, for then a script blocker won't need to be told to make an exception, which once again could become a security matter.

I don't believe BitDefender would likely detect malicious .leo file. They would likely constitute a Day zero exploit.

Summary

Before exploring this topic further, I believe Brian should consult with his management to determine whether there are any acceptable use cases for using any form of Leo, including .html files.

Edward

[Thomas Passin]

On Saturday, September 6, 2025 at 7:14:35 AM UTC-4 Edward K. Ream wrote:

... 

But Leo can do nothing to prevent the unwary from foolishly clicking a button in an outline from an unknown source. In this sense, passing .leo files around should be a real security concern.

- it could modify a standard Leo command to do something nefarious. For myself, I use a javascript blocker in my browser. It would be best if the read-only representation of a Leo outline wouldn't need to import any script packages, for then a script blocker won't need to be told to make an exception, which once again could become a security matter.

I don't believe BitDefender would likely detect malicious .leo file. They would likely constitute a Day zero exploit.

I agree; I was only referring to read-only representations that don't include executable scripts. Exploiting them would require smuggling new code in using imports of external libraries. That's what a javascript blocker could prevent. As could a simple representation that doesn't need to use imported libraries.

[Edward K. Ream]

My concern is that any .html file, no matter how supposedly simple, could contain malware.

We aren't going to be generating malware, and we aren't going to be knowingly passing around malware, but how do we prevent others from adding malware to our .html files?

In other words, trusting Félix doesn't solve our security problems.

Edward

[brian]

@Félix 

Let me know if you want to work together one this.  Currently, I'm working on the Django aspect.  My current plan is to use pydantic to create a nodeWrapper that has a children field that is a list of other nodeWrappers.  

@Edward,

You are correct about still being a security issue with html.  Most companies have protections against web attacks.  

My thought is most users won't have admin access to their work computer so they would have to go through IT which would take a lot of time and may not be able to happen.  I suspect attaching a html file will be able to be opened.  But worst case, I can put the html on my website and give them a link. 

I didn't realize VS code has a web based version. 

[Félix]

@Edward @Brian

Let me cook...  😎

@jkn 

Oh! -> about gitlab: great question! I'll look into it when I have more time. But about vscode.dev: going to github.com instead of vscode.dev is much better! See this video I made explaining 'why' and 'how' within the first minute of the video https://www.youtube.com/watch?v=M_mKXSbVGdE

Now, I'll try to finish a working HTML export demo tonight!

--
Félix

[Edward K. Ream]

On Saturday, September 6, 2025 at 11:58:10 AM UTC-5 brian wrote:

@Edward,

You are correct about still being a security issue with html.  Most companies have protections against web attacks.  

My thought is most users won't have admin access to their work computer so they would have to go through IT which would take a lot of time and may not be able to happen.  I suspect attaching a html file will be able to be opened.  But worst case, I can put the html on my website and give them a link.

I don't see how anyone can protect against a JS onLoad event that executes text in a .leo file. But I'll leave it at that. I've stated my security concerns.

Edward

[Edward K. Ream]

On Saturday, September 6, 2025 at 11:12:53 PM UTC-5 Félix wrote:

@Edward @Brian

Let me cook...  😎

No doubt this is an interesting project. I'll be interested to see your results! And I would be interested to hear your thoughts about security.

Edward

[Félix]

@Edward About security with relation to a html file content.

I think in an office setting, an executable, or a pdf file or microsoft-office document containing a malicious macro to be run is far worse.

Unlike running  a python script, (or any other scripting environment like a macro in excel , etc.) a browser running a web page /html script cannot arbitrarily read/write files on your hard drive. Even if it the browser's executable is run as admin,  the browser will bring up warning and permissions dialogs. That is because browsers do not open/load nor follow links with the "file://:" protocol.  You have to start up a web server so that the protocol is "http://localhost/blablabla/index.html" for the browser to load/open files..

The only thing you can do locally with an html file opened directly from the filesystem on your hard-disk is : rendering that html file 'alone'. - That is why it then has to be self-contained. Meaning that all the css styling and javascript scripts have to be inline in the file and cannot be imported in the html header from other script.js and style.css files like on a regular web page.

Malevolent webpages and/or html does not have to do with typical security concerns (file read/write on your hard-drive) but instead have to do with mimicking graphical design and layout of the html page, (like for your own bank, and have your real name and personal info printed on it that they automatically got somewhere else because its public info) to have the user confidently put in credentials. (to enter a fake sweepstake, or fake login, etc...) 

So in conclusion, opening a local html file in your browser is not a security concern in itself. 

Félix