Websightly

Core feature list

Discover features of the platform and learn how to get all the best from it!

This is not the complete list of what Websightly has to offer though - there are a lot of subtle nice touches everywhere!

Context switch on scroll

One of the core features of Websightly is the ability to read it like an interactive article. When you scroll through a page and new code snippet occurs, a context in the preview will change - regardless of where it's rendered, is it the side panel, separate window or inline preview within editor.

Upon context change and new snippet visible, the preview will get automatically updated.

No neeed to refresh or swap the example, see the results of the code seamlessly as you read it!

Learn by doing

There's no better way to learn than by doing. That's why every snippet is editable - play around with different combination of properties and values, try different approaches. Test the code as you wish. No saving required - just type!

The changes will be reflected on any code preview you wish to use, regardless if it's side panel, separate window or inline editor.

You can modify each snippet as you wish, and the preview will get updated

Want to remove a stylesheet to see how the page would react without it? No problem - just remove it from the snippet editor as you would remove from the code in real life!

Code in browser, as you wish

Have you ever saw a code snippet on the web and thought: "I wish I could see how it behaves on all breakpoints without constantly resizing it"

You can do it with Websightly! Simply click on the "New window" button from side preview - you'll get the preview that reacts to scroll and your edits unattached to main window! You can place such window on a separate monitor.

You can create as many windows as you want, meaning you can test multiple browser viewports in parallel and see how the changes are reflected across all of them.

Create the workspace as you wish, with ability to open multiple preview windows simultaniously

You can even put the editor into full screen mode, allowing you to code conviniently even if you're at school, at the internet caffe or wherever you cannot afford having a dedicated code editor installed.

Save the snippets!

Well, now that you can learn efficiently and see progress as we go - and even can modify the codebase directly in the snippet - why not save it with ease?

Download the code you see, with your changes included directly to your hard drive. Easily.

Click a download button in the side preview to download it directly, compressed in ZIP file. Use it to whatever you want! Attribution to Websightly is completely optional.

Keyboard support

We all love using our keyboards, right? Whether you're a power user or using a keyboard is a must for you to navigate, Websightly pays attention to that.

Regardless if it's a button or a form you need to use, skip some content or adjust the workpalce to your need - you have a right to do it with your keyboard.

Platform is created with keyboard support in mind.

Preview all registered keyboardshortcuts by pressing `H` button, or choosing a keyboard shortcuts button on any editor.

Available keyboard shortcuts (article view)

  • Use [ key to switch to content area
  • Use ] key to switch to preview area
  • Use keys between 1 and 9 to switch between active snippets
  • Use - key to enlarge preview area and = key to enlarge
  • Press P key to toggle preview area presence altogether
  • While editing snippet, press Ctrl + S to reload preview forcefully
  • While not editing snippet, Ctrl + S will save the active snippet contents as ZIP file
  • Press H key to open this popup
  • Press G to visit guide
  • Press C key to jump to Community section
  • Press N key to jump to narrator widget
  • While in an article, select a paragraph with a content and press R for it to be read aloud
  • Select a text you want to be read aloud and press R to read it.
  • Press esc to loose focus from whatever you're in

Those will be customisable as well, soon!

Comprehend better with custom reader

Have you ever found yourself in a place where combination of text and speach allowed you to comprehend complex topics easier? I did!

That's where screen readers really shine, but you might not know what is for example - VoiceOver, or might not use Firefox, which has built in reader mode. That's why Websightly uses native Speach Synthesis API to allow you to read the content out loud without additional toolset.

Custom narrator can be controlled with buttons that will stick to the top of the page once you activate them, and will read the content out loud - underlining currently spoken words.

Custom reader mode built into websightly allows you to both hear and see the content, without additional tooling installed

Narrator will scroll down to any content that is relevant - and the preview will update as well! You can just sit, listen and enjoy the tutorial.

You can even select any text in the article that you would like to be read out, and press `R` button to activate it!

Explore more features

This isn't complete feature list. There are a lot of little things that are created with UX, A11Y and privacy in mind.

The product is not finished, and is nowhere near the maintainance-only state. Hopefully, the amount of features will grow overtime and their quality will improve - this is still in early experimentation state.

If you have any thoughts on what could be improved, have an idea about new feature that would fit nicely to the concept of the platform, or anything else - feel free to contact me via email contact@websightly.net or through comments section.

You can also reach out to me directly and if you want to. Thank you for your time spent on Websightly!