Znote (recipes)
  Get Znote  

Welcome note

Getting started: How to start with Znote

 

Welcome to Znote 🎉

Znote is an interactive note-taking application that lets you write with Markdown, text and runnable code.
You will be able to prototype ideas and deploy micro-applications. The application is available on PC / Mac as well as on mobile. We invite you to create a Cloud account (bottom right) to take full advantage of the experience of synchronization of notes on all your devices: Znote

How does Znote work?

Znote is basically free for personal notes and all local purposes. You can organize your notes and codes with folders and tags located on the left toolbar. You can also pin notes 📌 to display them in the quick access section.

Productivity tips

  • Cmd+Y to navigate easily between notes. Arrow keys to change or Escape to navigate on the notelist.
  • Cmd+T to perform a full text search.
  • Cmd+L to display or hide the viewer/editor
  • Cmd+Space to show code and block suggestions
  • Right Click after a text selection to show some useful format options

Znote protects your privacy 🛡

Thanks to the Lock feature, Znote helps you protect your secrets by adding a password that only you know. You can also edit and secure your local text files.

Prototype a micro-app 🧪

Znote offers the possibility to prototype code directly in the preview. You can use pre-included libraries and third-party npm packages to explore and visualize your data. ✨

In view Edit mode: Ctrl+Enter to run current code block and Echap to close the preview.

Run and show result: use the print() function to display your result.

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2)
print(map1)

Data exploration with DanfoJs

const df = await dfd.readCSV("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv");
print(df)

Plot example

const df = await dfd.readCSV("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv");

const config = {
columns: ["AAPL.Open", "AAPL.High"],
};

const new_df = df.setIndex({ column: "Date"});
new_df.plot(el).line({ config });

Make diagrams thanks to mermaid Use the split view to see the diagram Ctrl+L

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

Productivity tips

  • Cmd+Enter to execute the current code block
  • Cmd+Space to show code suggestions

Try to create a dedicated function with the f(x) button (on the top right) to customize your code suggestions. Into the Shortcut functions modal, save the default myFunc, then into the editor, with Cmd+Space create a Code block JS and into this code block, call the new myFunc()function

myFunc();

Go further with functions

More features Use Znote as SQL client with your database Follow our documentation website to discover all Znote possibilities.

Deploy a micro-app 🌐️

Once your free cloud account has been created, you will be able to deploy the application frontend/backend and CRON, according to parameters given on the code block. See the full documentation here: https://doc.notebookjs.app/#/jobs

How to deploy: Run the code block Ctrl+Enter and click on the cloud button ☁️ to publish the job online.

Frontend code

HTML Page Try in the code block below to generate an HTML template with Ctrl+Space

<h1>Hello world</h1>

React App

npm i -S react
npm i -S react-dom

The app below will be accessible online only after a login with the account given.

import React from 'react';
import ReactDOM from 'react-dom';

const LikeButton = (props) => {
  return <h1>{props.name}</h1>;
}
ReactDOM.render(<LikeButton 
  name="Hello from React!" />
  , htmlEl);

Backend code

Cron app

npm i -S tablify

The CRON job below will be executed every day at noon. Use Ctrl+Space on the cron= parameter to help you change the period.

//exec: node
const tablify = require("tablify");
console.log(tablify({user:"tony", email: "tony@example.com"}))

Run a Node API

npm i -S express

Once the API is deployed, the exposed port will always be publicly redirected to HTTP 443

//exec: node
const express = require('express')
const app = express()

app.get('/', function (req, res) {
  console.log("pass")
  res.send('Thank you 👍')
})

app.listen(4000)

Find inspiration 💡 🦄

You can use our recipe gallery: recipes (also accessible with Ctrl+N > New from Template) We've also bundled useful micro-apps into an "Indie" pack for you, to create ==beautiful dashboards==, backends as well as sample integrations of popular third-party services: 👉 premium

Available for everyone 🛠

We provide and continuously improve our tools. You can participate by subscribing to the newsletter directly on the home page of our site Znote or help us improve the quality of our tools: discussions

Related recipes