loading...
Cover image for Code Notes, an open source code snippet manager to increase our productivity! πŸš€

Code Notes, an open source code snippet manager to increase our productivity! πŸš€

lauthieb profile image Laurent Thiebault πŸš€ Updated on ・3 min read

Who has never been copying paste a piece of code in a simple notebook? Built with Electron & Vue.js, Code notes is the open source & free solution to easily organize and find your snippets & Github gists!

Today, through this article, I would like to show its features and since it's my first open source project with already 450+ stars on Github and it's now 1 year old, I think it's the right time! πŸ˜€

What about its features?! πŸ’»

Code Notes is a software with a lot of features allowing us to increase our productivity everyday. Firstly, let me introduce them with a video!

Create & update your snippets easily 😎

As you can see, it's pretty easy to save snippets and retrieve them later!
You just have to select a name, a description, some tags to retrieve them easily, add your note by selecting its language and click create! πŸ‘Œ

Create and update a snippet on Code Notes

Synchronize & manage your Github Gists πŸŽ‰Β 

After a lot of requests from the community, since the last version of Code Notes, you have the possibility to synchronize your Github gists (secret or public) directly from Code Notes. By simply giving the access token, you are ready to find your Gists on the application, modify them or create new ones!

Synchronize & manage your Github Gists on Code Notes

Create & update several snippets in 1 note πŸ“

In february 2018, when Code Notes was launched, many developers asked me if it was possible to group several snippets in one note. This idea was great and I implemented it directly!

Add several snippets in 1 note in Code Notes

Big comfort & linting 😍

If there is anything nice in Code Notes, it's this way of writing these notes as if we were in an IDE. Thanks to brace, you benefit from linting and an irreproachable writing comfort!

Big comfort & linting available in Code Notes

Retrieve them quickly 🏎

You can find your notes easily by searching on their names, description, tags or languages!

Retrieve snippets quickly on Code Notes

Copy to clipboard πŸ“Ž

Of course, in order to prevent you from selecting all your snippet, a small button "copy to clipboard" is there for you next to your snippet's name πŸ‘‹

Copy to clipboard next to the snippet's name in Code Notes

A worldwide project 🌎

Code Notes in a few numbers? It's more than 6,500 unique users in one year, coming from the 4 corners of the planet! (1,300 from France, 1,100 from United States & 300 from China).
Thank you so much!

Map of the users of Code Notes in the world

Download it, it's multi-platform & completely free 🎁

To download it, just go to our download section and follow the instructions for your platform!

What's next?! πŸš€

Code Notes has not finished growing, many feature requests are available in our Github issues. Here is a list of some great future features:

You can imagine with all these great ideas, everything will not be able to arrive very quickly. So feel free to contribute to improve this beautiful software. I would love to help you! 🍻

Thanks for reading ❀️

I want to thank you if you read this article to the end, it is a project that is close to my heart because it is my first open source. Feel free to add a ⭐️, we are already 350+ and I am very happy πŸ˜€

Use it, talk to your friends, your family or even your dog and increase your productivity! πŸš€

See you soon πŸ‘‹

Download Code Notes

GitHub logo lauthieb / code-notes

A simple code snippet & gist manager for developers built with Electron & Vue.js πŸš€


electron-vue

A simple code snippet & gist manager for developers built with Electron & Vue.js πŸš€

https://lauthieb.github.io/code-notes

Build Status Join the chat at https://gitter.im/code-notes/community Financial Contributors on Open Collective PRs Welcome

forthebadge forthebadge forthebadge

Buy Me A Coffee

Overview

The aim of this project is to make us more efficient by offering a pretty cool tool : a kind of notepad for our code πŸ˜ƒπŸ“

Demo

Code Notes

Download

Go the the download section of our website to download Code Notes on your OS.

Contributing

For the moment, the project is pretty young. But if we work together to build the "bloc-notes" we dream, we can build pretty things for sure !
So, feel free to contribute. Follow this guide πŸ€“

Build Setup

# install dependencies
npm install
# serve with hot reload at localhost:9080
npm run dev
# build electron application for production
npm run build
# run unit & end-to-end tests
npm test

# lint all JS/Vue component files in `src/`
npm run eslint

Roadmap to V1.3.0 πŸ’ͺ🏻

To follow the…

Posted on by:

lauthieb profile

Laurent Thiebault πŸš€

@lauthieb

Passionate DEVeloper, blogger & console logger πŸ‘¨πŸ»β€πŸ’» - but also DJ, pianist, guitarist, speaker & life lover πŸ––

Discussion

pic
Editor guide
 

Installed on Windows and when the program runs the screen is blank and the only thing that is visible is the Menu with options "Application" and "Edit". Clicking "Application"-"About" doesn't do anything.

I've reinstalled twice.
Any suggestions?

 

Nice job Laurent! I had this on my backlog but it seems I won't need to implement it now! For the next step, you could think about integrating with Visual Studio Code and PhpStorm (or other source code editors / IDEs).

 

I'm glad you like it Luis Filipe ☺️
Yep, good idea! Thanks!

 

I I personally use 3Cols.com as it's the only site that isn't slow like gists, offers enough categorisation options and stores all your snippets in the cloud for free. The only thing it charges for is sharing boards and that only costs $1.69 per month

 

how can i access all my snippet from everywhere ?

 

make all your snippets as gists?

 

Yes rouzbeh, you're right πŸ‘Œ

As a workaround, you can also check notes and settings are in the "userData" directory of this application:

  • Windows 7, 8.1, and 10: C:\Users[username]\AppData\Local\code-notes
  • Mac OS X El Capitan: Users/[username]/Library/Application Support/code-notes
  • Linux: /home/[username]/.config/code-notes

Inside this folder, you will have notes.db and settings.db. So, you would be able to copy/paste those files in another computer. (Import/Export is a current feature request in our issues ☺️

If You Guys Add an Import/Export Function, You Might As Well Finish It Up With a Sync Feature. Google Drive or Dropbox ;)

 

This looks amazing! Nicely done, I'll surely check it out.

 
 

This is something that I had on my mind to build and there it is!

 

This is fantastic! As someone who uses Gists for smaller, one-off snippets all the time this is a lifesaver!

 

Oh thanks a lot Al Romano ☺️
Feel free to talk about Code Notes to your friends/colleagues! πŸš€

 

Where all the local code notes are stored?

 

Hey Hassan! As you can see in the code, notes and settings are in the "userData" directory of this application:

  • Windows 7, 8.1, and 10: C:\Users[username]\AppData\Local\code-notes
  • Mac OS X El Capitan: Users/[username]/Library/Application Support/code-notes
  • Linux: /home/[username]/.config/code-notes

Inside this folder, you will have notes.db and settings.db. So, you will be able to backup easily 😎

 

Awesome job. Im looking for more javascript and vue experience maybe I could contribute some day

 

Thank you very much William! I'm glad you like this project πŸ˜€
Yes, feel free to contribute, I would love to help you!

 

That's exactly what I want. Thanks.

 

Perfect! You're welcome 😎
I'm glad you like this project πŸ˜€

 

I was looking for an app like this, so excited to check it out!

 

I'm glad you like it Kelli πŸ˜€
Thanks for your comment!