⚙ Smart Rem

[hannesfrank]

Smart Rems are rem that can do stuff. They are like to plugins, but more lightweight, easier to implement, are somewhat better integrated into RemNote and have access to more data.

Smart Rems - RemNote as a REPL

You can do:

• Calculate arbitrary terms in JavaScript
• Spotify playlists
• Show information from external services (weather, ip, …)
• Embed some websites (even documents from cloud storage)
• Display any HTML (including iframes) and markdown (including markdown tables)

This is about 200 lines of code and 4-5 hours of tinkering. Much more stuff can be done in a few minutes/hours of work, like

• >>> heatmap
• all kinds of queries within RemNote (rems and cards)
• WikiData queries
• Dashboards integrating other information sources (stock prices)
• UI elements (timer, inputs)

Right now this is limited to reading RemNotes offline database (IndexedDB). I don’t know if writing is save.

Since they are quite modular it should not be too difficult to distribute them as User Scripts through RemNote Library: A place to discover and share Custom CSS (and more?).

Related Feature Requests:

• Native Plugins (Custom JavaScript) Rem Lifecycle hooks and writing the IndexedDB.
• Editor Commands Pt. 1 (Click on Rems with JavaScript) History API access would be nice to have more
• URL endpoint to Today’s Document Then we can generate a >>> weekly agenda or Daily Document calendars? more easily
• Rem within Jupyter notebook Smart Rem execute cells like a Jupyter notebook

Roam Research equivalent: Smart Blocks (I have not looked too much into this. Maybe there are some more cool things we can implement as well.)

[liberated_potato]

Wow, this looks like a game changer. I assume this is going to be precursor to Native Plugins (Custom JavaScript), right?

[hannesfrank]

I think this is more a single use case of those native plugins. It just evaluates single rems locally. Native plugins could also change the UX in fundamental ways, like a vim mode, or display informations more globally, like an overlay to visualize how good cards on a page are internalized.

[Martin]

Wow, this is really clever!

[ognsya]

I’m obviously excited about this, but I don’t really understand what’s going on…
Is this an external app running through RemNote?
How do/will users… use it?

[hannesfrank]

Just some extra JavaScript running in the background (user script or devtools console). Currently you would use it most comfortably through a browser extension (see [ User Script] Toggle Sidebar and Resize Pane Shortcuts on how to install one) which is obviously not possible in the mobile or desktop app (on desktop you could still paste stuff in the console).
That’s why I’d like Native Plugins (Custom JavaScript).

Don’t even get me started with external apps. Communicating with a locally running application would give you endless possibilities. Like accessing the file system and automating all kinds of stuff.

[Reijo]

Amazing idea! What would be even cooler is to have support for “variables”, rems that store data like integers, floats, dates etc. which you can reference by name and then perform calculations on them. Imagine for example storing your bills for gas or something like that, you could then calculate different statistical data based on that. That way you could not only store stuff that you are learning but all sorts of data from your life.

[UMNiK]

Surely that would require something akin to Jupyter or Mathematica, which seems a bit heavy to inject with userscripts?

[hannesfrank]

JavaScript libraries are (by nature, because they have to be downloaded and run in the browser) pretty small and modular. E.g. math.js which supports complex numbers, matrices and some symbolic computation is 150kb and even Plotly.js an all-in-one plotting solution, is only 1mb.

[UMNiK]

But is getting those math functions to interact with existing RemNote features also 150kb? Correct me if I’m wrong, but we aren’t talking a calculator in an iframe here, are we? Considering how shaky even plain text can be at this stage (jolly jumping carets, anyone?), perhaps it’s best to temper expectations. Even getting references to work in static Latex would be nice. Or hey, feel free to blow me out of the water with your skills, like you have done so many times before!

[hannesfrank]

Supporting variables is trivial with RemNote’s key:: value format.

Aggregating values, e.g. sum the values of all rem tagged with #expenseX is also doable, but for that a bit more parsing is required.

[J.a.y]

I would like to embed iFrames (namely, Desmos.com/calculator applets). So, how do you actually install Smart Rem?

[enthusiastic]

Can I use this feature right now? still confused about how to use it… Having reading the discussion above me it seems that I can use it only on my web browser right now. Can you please elaborate the process of using it?

[hannesfrank]

It works on the desktop app too, but it requires some technical knowledge to set it up for which there is some documentation in the github page.

Also I would not call it a “feature”, more a proof of concept/hack. That being said I’d say if you are confused by the usage instructions then I would actually not recommend using it.

[enthusiastic]

Oh yeah I understand it now, looks a really amazing feature and I’m really excited about the function it describs like mermaid graph. However I found that the latest update was already 5m ago… So I’m wondering when will it be prepared to realease?

[helado]

hannes was just a user like you, playing around and sharing some of that. He joined the team like 1 minute ago.

[enthusiastic]

I really want to give it a go… can this one be used with " Greasy Fork"(I have seen your other .js file used by this). If yes, how can I use it. Thank you!
In addition, when I was trying the method in github, I can not find where “sources is”)?