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 Markdown with ==runnable code==.
You will be able to make notes with charts and data. You can publish your interactive reports online and share or track your favorite metrics. The application is available on PC/Mac. We invite you to create a Cloud account (bottom right) to take full advantage of the app.

How does Znote work?

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
  • Shift+Cmd+Space to show read mode
  • Double click on preview to edit line
  • 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.

Make a data-app note 🧪

Znote lets you prototype code directly in the app with code preview. You can use pre-included libraries and third-party npm packages to explore and visualize various data. ✨

In 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)

Make graphs

With DanfoJS

Read files with DanfoJs

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

Create Plots

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 });
With Apex

Znote also includes various charts:

areaChart({
  series: [
    {name: 'Music', data: [11, 15, 26, 20, 33, 27]},
    {name: 'Photos', data: [32, 33, 21, 42, 19, 32]},
    {name: 'Files', data: [20, 39, 52, 11, 29, 43]}],
  categories:['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2']
});
radialChart({series: [71, 63, 77], labels:['June', 'May', 'April']});
With Mermaid

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

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long time.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

Productivity tips

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

Install Packages

Install npm package in app

npm i -S tablify
const tablify = require('tablify');
const r = await fetch('https://www.govtrack.us/api/v2/role?current=true&role_type=senator')
const json = await r.json();
print(tablify(json.objects.map(e=>e.person)))

Create functions

Znote includes some convenience functions to easily manipulate JSON. Moreover you could create your own custom functions.

Try to create custom function, click on the f(x) button (on the bottom right) and 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

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 note 🌐️

Once your cloud account has been created (button on the bottom right), you will be able to deploy and share private or public reports.

Deploy a code block 🌐️

As advanced use cases, you can deploy a specific code block as frontend/backend or CRON function, depending on the parameters given on the code block. View 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 block 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. Logs are accessible through the dashboard.

//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) to create ==beautiful dashboard reports==. We've also bundled useful ready to deploy blocks into an "Indie" pack for you, to create 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