Skip to main content
Roadmap for Windows Runtime apps using JavaScript

Applies to Windows and Windows Phone

Here are key resources to help you start developing Windows Runtime apps using JavaScript. (Note that this is by no means a comprehensive list of all the features or available resources.) This topic is designed for you to start from the Getting started section, but then skip around and learn about the app functionality that you're interested in. Bookmark this page and come back when you need to learn how to add new functionality to your app.

If you'd rather use another programming language, see:

Get started

These topics are a great intro to creating Windows Runtime apps using JavaScript:

Programming Windows Store apps with HTML, CSS, and JavaScript

This free, 17-chapter ebook provides comprehensive guidance for developing Windows Store apps using JavaScript. It contains a Quickstart section to give you immediate experience with the tools, the API, and some platform features, and then describes the rest the platform in detail.

Create a basic user interface

These topics cover the essential user interface for Windows Runtime apps.

Choosing the right UI surfacesStart by ensuring that your app uses the right surface at the right time.
Guidelines for user interactionLearn how to create an app that users can interact with in intuitive and immersive ways, no matter what device or input method they use.
AccessibilityLearn how to make your app accessible to the widest possible audience, including people who have impairments or disabilities.
App barsThe app bar presents navigation, commands, and tools to users.
Context menusContext menus display up to five commands that enable users to take immediate action that is relevant to what they are doing.
Controls - HTMLCreate controls and connect them to code.
Controls and styles - WinJSUse Windows Library for JavaScript controls and styles.
Layouts and viewsWhen you plan for different window sizes, your UI can elegantly reflow across whatever size screen it's on, no matter the screen orientation or user interaction view.
NavigationNavigate between pages or display content from other pages.
Pen and stylus inputEnable digital ink functionality using a pointer device such as a pen or stylus.
ResourcesCreate and manage app UI resources such as images and strings.
TilesCreate and update tiles.
Toast notificationsCreate and send toast notifications.
Touch inputCreate a touch-first experience.

 

Manage launch, suspend, and resume

To ensure that your user has a great experience with your app, consider what should happen as it is launched, suspended, and resumed.

AutoPlayProvide your app as an option when a user connects a device to their computer. This includes cameras, media players, USB thumb drives, and DVDs.
File activationProvide your app as an option to handle a file type.
Protocol activationProvide your app as an option to handle a protocol.
Splash screenThe default splash screen displays when users launch your app, providing immediate feedback to users while your app initializes its resources.
Suspend/resumeWhen you handle app suspension and resumption, users will have a better experience with your app. They can switch away from your app and return to find it right where they left off, as if the app had been running in the background.

 

Implement contracts

Contracts enable interaction between the operating system and one or more Windows Runtime apps.

File pickerYou can help users pick files from your app while they are using another app. Users gain freedom and flexibility. Apps increase their popularity by participating in file picker contracts.
Play ToUse the Play To contract to enable users to easily stream audio, video, or images from their computer to devices in their home network.
SearchYou can add a search pane to your app so users can search your app's content and content from other apps as well. Apps that participate in the Search contract gain traffic and usage.
SettingsYou can implement the Settings contract so that users can access your app's settings from the Settings charm.
SharingGreat apps make it easy for users to share what they are doing with their friends and family. Apps that support the Sharing contract can automatically share content to and from any other app that also supports the Sharing contract.

 

Access data and content

You can retrieve RSS feeds and download and upload files.

Accessing and publishing syndicated contentPublish, update, and remove syndicated feeds or feed items.
Data bindingData binding enables you to synchronize the elements of your app with different sources of data, including databases, files, and internal objects.
Transferring data in the backgroundInitiate, pause, resume, report progress for, and cancel a file download operation.

 

Access files and folders

These topics demonstrate how to programmatically access data from the file system.

Accessing files with file pickersShow the file picker when users need to select a file to open.
Accessing files programmaticallyUse search queries to enumerate and access files in a folder, library, device, or network location.
Launch the default app for a fileLaunch the default app for a file type.
Reading a writing a fileCreate, write, and read files from the file system.

 

Connect with apps and people

You can create connected apps that create great experiences for your users.

Proximity and tappingConnect computers that are in close range with a simple tap gesture.
User contactsEnable users to access their contacts so they can share content, email, message each other, or interact in new ways.

 

Add animation and graphics

You can liven up your app with animations, transitions, and graphics.

Animating your UIUse the animation library to animate lists, transitions, pointers, and UI elements and surfaces.
Drawing to a canvasUse SVG and Canvas to add fast, lightweight vector graphics to your app.

 

Use multimedia

These sections describe how to add multimedia to your app.

Capture photos and videosCapture photos and videos in your app.
Play audio and videoPlay audio and video in your app.

 

Support devices

You can support a number of devices in your app. Motion and orientation sensors let your app respond to movement. Light sensors let your app respond to changes in ambient light. Geolocation lets your app respond to the user's location.

Enumerating devicesEnumerate devices by the functionality they provide.
AccelerometersUse an accelerometer to detect changes in movement on one or two axes.
GyrometersUse a gyrometer to detect changes in orientation and rate of rotation. Gyrometers and accelerometers work together as game controllers.
InclinometersUse an inclinometer to detect changes in movement on the X, Y, and Z axes.
Light sensorsUse a light sensor to detect and respond to changes in ambient light.
GeolocationDetect the user's geographic location.
Printers Use print capabilities to improve the print experience for the user.
Removable storageAccess content on media and storage devices, such as Windows Portable Devices (WPD), Media Transport Protocol (MTP) devices, and Mass Storage Class (MSC) devices.

 

Debug and test apps

Run apps from Visual StudioRun apps on local machine, simulator, or remote device.
Start a debugging sessionConfigure and start debugging sessions.
Debugger navigationUse the Visual Studio debugger to debug apps.
Debug JavaScript appsUse VS tools to debug HTML, CSS, and JavaScript code.
Analyze app performanceUse Visual Studio profiling tools for JavaScript.
Analyze memory usageUse the JavaScript Memory Analyzer to help find memory leaks.

 

Guidelines and best practices

Design inspirationHere are some articles that show examples of good design for various categories of apps (for example games, productivity apps, news apps, and so on).
Index of UX guidelines for Windows Runtime appsUse this resource to find best practices for a variety of specific design implementations and features like file pickers, SemanticZoom and so on.
Performance best practices for Windows Store apps using JavaScriptHere are some concepts and guidelines to consider to ensure that your app performs well on your users' computers.
Guidelines and checklist for accessibilityDescribes the guidelines that you should follow if you want to declare that your app is accessible, as part of the Windows Store submission process.

 

Related topics

HTML/CSS for Windows Store apps
Windows API for Windows Store apps
Packaging apps