Joplin Web App Resource Loading Flow

System Design · flowchart diagram · NOASSERTION

Illustrates the process of loading and rendering attached resources in the Joplin Web App, involving file system interaction and conversion to blob URLs fo

Source: https://github.com/laurent22/joplin/blob/7f55a566e5a95e24cbfd7792cd7baf07ba46dc10/readme/dev/spec/web_app.md
Curated by laurent22
Joplin Web App Resource Management File System Rendering Blob URL Assets

Mermaid source

flowchart TD
	subgraph app
	resources["Attached resource IDs"]
	loadFiles("Load from fsDriver")
	renderCall("Rerender")

	resources-->loadFiles
	end

	subgraph NoteViewer
	toBlobUrl("Convert to blob URL")
	renderer("Renderer")

	loadFiles--"setResourceFile(id, file)"-->toBlobUrl
	resourcePathOverrides
	toBlobUrl--"store in"-->resourcePathOverrides

	resourcePathOverrides-->renderer
	renderCall-->renderer
	end

What this diagram shows

This diagram shows the flow for loading and rendering attached resources within the Joplin Web App. It details how resource IDs are used to load files from a virtual file system, convert them into blob URLs, manage resource path overrides, and finally pass them to the renderer for display.

When to use it

Use this diagram to understand resource handling in web applications with virtual file systems, especially when dealing with embedded assets or content that needs to be served locally via blob URLs. It's relevant for designing or debugging asset loading pipelines.

How to adapt it for your project

To adapt this diagram, you could replace 'fsDriver' with your specific file storage mechanism (e.g., cloud storage, local database). Modify the 'toBlobUrl' step to reflect different asset transformation needs, such as image optimization or video transcoding. Add steps for caching, error handling, or security checks for resource access.

Key concepts