JavaScript Cross-Platform

Open-source JavaScript projects categorized as Cross-Platform | Edit details

Top 23 JavaScript Cross-Platform Projects

  • Aurelia 1

    The Aurelia 1 framework entry point, bringing together all the required sub-modules of Aurelia. (by aurelia)

  • Google-Play-Music-Desktop-Player-UNOFFICIAL-

    A beautiful cross platform Desktop Player for Google Play Music

    Project mention: Notifications on Windows 10 with the desktop app | reddit.com/r/YoutubeMusic | 2021-10-29
  • OPS

    OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.

  • fkill

    Fabulously kill processes. Cross-platform.

    Project mention: Node.js Packages and Resources | dev.to | 2021-09-06

    fkill - Fabulously kill processes. Cross-platform.

  • pennywise

    Cross-platform application to open any website or media in a floating window

    Project mention: news.ycombinator.com | 2021-02-21
  • Google-Assistant-Unofficial-Desktop-Client

    A cross-platform unofficial Google Assistant Client for Desktop (powered by Google Assistant SDK)

    Project mention: Anyway to use Google assistant on WSA? Clicking on settings is taking me to windows settings. | reddit.com/r/Windows11 | 2021-10-26

    Though it doesn't directly assist here, you could always go the native route: https://github.com/Melvin-Abraham/Google-Assistant-Unofficial-Desktop-Client

  • style-dictionary

    A build system for creating cross-platform styles.

    Project mention: Introduction to Variabless | reddit.com/r/css | 2021-08-02

    Cool. Can you compare this to https://github.com/amzn/style-dictionary?

  • viro

    ViroReact: AR and VR using React Native

    Project mention: Looking for AR Library | reddit.com/r/reactnative | 2021-08-22

    Viro React is a good library that we use. https://github.com/viromedia/viro

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • re-start

    react-native template to target multiple platforms :globe_with_meridians: :iphone: :computer: with single codebase.

    Project mention: React Native Apps For Mobile and Desktop? | reddit.com/r/reactnative | 2021-05-13

    I've also seen: https://github.com/react-everywhere/re-start which is being used over at r/jellyfin. Problem is, it doesn't have the backing of a major company, and I can't risk my project just having support dropped out of nowhere.

  • nativescript-cli

    Command-line interface for building NativeScript apps

    Project mention: NativeScript, Databases, and You | dev.to | 2021-05-11

    const { join, relative, resolve, sep, dirname } = require('path'); const fs = require('fs'); const webpack = require('webpack'); const nsWebpack = require('@nativescript/webpack'); const nativescriptTarget = require('@nativescript/webpack/nativescript-target'); const { nsSupportHmrNg } = require('@nativescript/webpack/transformers/ns-support-hmr-ng'); const { nsTransformNativeClassesNg } = require("@nativescript/webpack/transformers/ns-transform-native-classes-ng"); const { parseWorkspaceConfig, hasConfigurations } = require('@nativescript/webpack/helpers/angular-config-parser'); const { getMainModulePath } = require('@nativescript/webpack/utils/ast-utils'); const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require("@nativescript/webpack/utils/tsconfig-utils"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const { NativeScriptWorkerPlugin } = require('nativescript-worker-loader/NativeScriptWorkerPlugin'); const TerserPlugin = require('terser-webpack-plugin'); const { getAngularCompilerPlugin } = require('@nativescript/webpack/plugins/NativeScriptAngularCompilerPlugin'); const hashSalt = Date.now().toString(); module.exports = env => { // Add your custom Activities, Services and other Android app components here. const appComponents = [ "@nativescript/core/ui/frame", "@nativescript/core/ui/frame/activity" ]; const platform = env && ((env.android && 'android') || (env.ios && 'ios')); if (!platform) { throw new Error('You need to provide a target platform!'); } const AngularCompilerPlugin = getAngularCompilerPlugin(platform); const projectRoot = __dirname; // Default destination inside platforms//... const dist = resolve( projectRoot, nsWebpack.getAppPath(platform, projectRoot) ); const { // The 'appPath' and 'appResourcesPath' values are fetched from // the nsconfig.json configuration file // when bundling with `tns run android|ios --bundle`. appPath = 'src', appResourcesPath = 'App_Resources', // You can provide the following flags when running 'tns run android|ios' snapshot, // --env.snapshot, production, // --env.production configuration, // --env.configuration (consistent with angular cli usage) projectName, // --env.projectName (drive configuration through angular projects) uglify, // --env.uglify report, // --env.report sourceMap, // --env.sourceMap hiddenSourceMap, // --env.hiddenSourceMap hmr, // --env.hmr, unitTesting, // --env.unitTesting testing, // --env.testing verbose, // --env.verbose ci, // --env.ci snapshotInDocker, // --env.snapshotInDocker skipSnapshotTools, // --env.skipSnapshotTools compileSnapshot // --env.compileSnapshot } = env; const { fileReplacements, copyReplacements } = parseWorkspaceConfig(platform, configuration, projectName); const useLibs = compileSnapshot; const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; const externals = nsWebpack.getConvertedExternals(env.externals); const appFullPath = resolve(projectRoot, appPath); const appResourcesFullPath = resolve(projectRoot, appResourcesPath); let tsConfigName = 'tsconfig.json'; let tsConfigPath = resolve(projectRoot, tsConfigName); const tsConfigTnsName = 'tsconfig.tns.json'; const tsConfigTnsPath = resolve(projectRoot, tsConfigTnsName); if (fs.existsSync(tsConfigTnsPath)) { // support shared angular app configurations tsConfigName = tsConfigTnsName; tsConfigPath = tsConfigTnsPath; } const tsConfigEnvName = 'tsconfig.env.json'; const tsConfigEnvPath = resolve(projectRoot, tsConfigEnvName); if (hasConfigurations(configuration) && fs.existsSync(tsConfigEnvPath)) { // when configurations are used, switch to environments supported config tsConfigName = tsConfigEnvName; tsConfigPath = tsConfigEnvPath; } const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`; const entryPath = `.${sep}${entryModule}`; const entries = { bundle: entryPath }; const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf('@nativescript') > -1); if (platform === 'ios' && !areCoreModulesExternal && !testing) { entries['tns_modules/@nativescript/core/inspector_modules'] = 'inspector_modules'; } const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath); nsWebpack.processTsPathsForScopedModules({ compilerOptions }); nsWebpack.processTsPathsForScopedAngular({ compilerOptions }); const ngCompilerTransformers = [nsTransformNativeClassesNg]; const additionalLazyModuleResources = []; const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }; const copyTargets = [ { from: { glob: 'assets/**', dot: false } }, { from: { glob: 'fonts/**', dot: false } }, ...copyReplacements, ]; if (!production) { // for development purposes only // for example, include mock json folder // copyTargets.push({ from: 'tools/mockdata', to: 'assets/mockdata' }); if (hmr) { ngCompilerTransformers.push(nsSupportHmrNg); } } // when "@angular/core" is external, it's not included in the bundles. In this way, it will be used // directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes // fixes https://github.com/NativeScript/nativescript-cli/issues/4024 if (env.externals && env.externals.indexOf('@angular/core') > -1) { const appModuleRelativePath = getMainModulePath( resolve(appFullPath, entryModule), tsConfigName ); if (appModuleRelativePath) { const appModuleFolderPath = dirname( resolve(appFullPath, appModuleRelativePath) ); // include the new lazy loader path in the allowed ones additionalLazyModuleResources.push(appModuleFolderPath); } } const ngCompilerPlugin = new AngularCompilerPlugin({ hostReplacementPaths: nsWebpack.getResolver([platform, 'tns']), platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot) ), mainPath: join(appFullPath, entryModule), tsConfigPath, skipCodeGeneration: false, sourceMap: !!isAnySourceMapEnabled, additionalLazyModuleResources: additionalLazyModuleResources, compilerOptions: { paths: compilerOptions.paths } }); let sourceMapFilename = nsWebpack.getSourceMapFilename( hiddenSourceMap, __dirname, dist ); const itemsToClean = [`${dist}/**/*`]; if (platform === 'android') { itemsToClean.push( `${join( projectRoot, 'platforms', 'android', 'app', 'src', 'main', 'assets', 'snapshots' )}` ); itemsToClean.push( `${join( projectRoot, 'platforms', 'android', 'app', 'build', 'configurations', 'nativescript-android-snapshot' )}` ); } const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigName); // Shut up typeorm and nativescript-sqlite warnings externals.push('module'); externals.push('typeorm-aurora-data-api-driver'); externals.push('sqlite3'); externals.push('sql.js'); externals.push('redis'); externals.push('react-native-sqlite-storage'); externals.push('pg-query-stream'); externals.push('pg-native'); externals.push('pg'); externals.push('oracledb'); externals.push('nativescript-sqlite-sync'); externals.push('nativescript-sqlite-encrypted'); externals.push('nativescript-sqlite-commercial'); externals.push('mysql2'); externals.push('mysql'); externals.push('mssql'); externals.push('mongodb'); externals.push('ioredis'); externals.push('hdb-pool'); externals.push('better-sqlite3'); externals.push('@sap/hana-client'); nsWebpack.processAppComponents(appComponents, platform); const config = { mode: production ? 'production' : 'development', context: appFullPath, externals, watchOptions: { ignored: [ appResourcesFullPath, // Don't watch hidden files '**/.*' ] }, target: nativescriptTarget, entry: entries, output: { pathinfo: false, path: dist, sourceMapFilename, libraryTarget: 'commonjs2', filename: '[name].js', globalObject: 'global', hashSalt }, resolve: { extensions: ['.ts', '.js', '.scss', '.css'], // Resolve {N} system modules from @nativescript/core modules: [ resolve(__dirname, 'node_modules/@nativescript/core'), resolve(__dirname, 'node_modules'), 'node_modules/@nativescript/core', 'node_modules' ], alias: { '~/package.json': resolve(projectRoot, 'package.json'), '~': appFullPath, "tns-core-modules": "@nativescript/core", "nativescript-angular": "@nativescript/angular", ...fileReplacements }, symlinks: true, // Again typeorm requires stuff not in nativescript mainFields: ['browser', 'module', 'main'], }, resolveLoader: { symlinks: false }, node: { // Disable node shims that conflict with NativeScript http: false, timers: 'empty', setImmediate: false, fs: 'empty', __dirname: false }, devtool: hiddenSourceMap ? 'hidden-source-map' : sourceMap ? 'inline-source-map' : 'none', optimization: { runtimeChunk: 'single', noEmitOnErrors: noEmitOnErrorFromTSConfig, splitChunks: { cacheGroups: { vendor: { name: 'vendor', chunks: 'all', test: (module, chunks) => { const moduleName = module.nameForCondition ? module.nameForCondition() : ''; return ( /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some(comp => comp === moduleName) ); }, enforce: true } } }, minimize: !!uglify, minimizer: [ new TerserPlugin({ parallel: true, cache: !ci, sourceMap: isAnySourceMapEnabled, terserOptions: { output: { comments: false, semicolons: !isAnySourceMapEnabled }, compress: { // The Android SBG has problems parsing the output // when these options are enabled collapse_vars: platform !== 'android', sequences: platform !== 'android', // custom drop_console: true, drop_debugger: true, ecma: 6, keep_infinity: platform === 'android', // for Chrome/V8 reduce_funcs: platform !== 'android', // for Chrome/V8 global_defs: { __UGLIFIED__: true } }, // custom ecma: 6, safari10: platform !== 'android' } }) ] }, module: { rules: [ { include: join(appFullPath, entryPath), use: [ // Require all Android app components platform === 'android' && { loader: '@nativescript/webpack/helpers/android-app-components-loader', options: { modules: appComponents } }, { loader: '@nativescript/webpack/bundle-config-loader', options: { angular: true, loadCss: !snapshot, // load the application css if in debug mode unitTesting, appFullPath, projectRoot, ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform) } } ].filter(loader => !!loader) }, { test: /\.html$|\.xml$/, use: 'raw-loader' }, { test: /[\/|\\]app\.css$/, use: [ '@nativescript/webpack/helpers/style-hot-loader', { loader: "@nativescript/webpack/helpers/css2json-loader", options: { useForImports: true } }, ], }, { test: /[\/|\\]app\.scss$/, use: [ '@nativescript/webpack/helpers/style-hot-loader', { loader: "@nativescript/webpack/helpers/css2json-loader", options: { useForImports: true } }, 'sass-loader', ], }, // Angular components reference css files and their imports using raw-loader { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: 'raw-loader' }, { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ['raw-loader', 'resolve-url-loader', 'sass-loader'] }, { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: [ '@nativescript/webpack/helpers/moduleid-compat-loader', '@nativescript/webpack/helpers/lazy-ngmodule-hot-loader', '@ngtools/webpack' ] }, // Mark files inside `@angular/core` as using SystemJS style dynamic imports. // Removing this will cause deprecation warnings to appear. { test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/, parser: { system: true } } ] }, plugins: [ // Define useful constants like TNS_WEBPACK new webpack.DefinePlugin({ 'global.TNS_WEBPACK': 'true', 'global.isAndroid': platform === 'android', 'global.isIOS': platform === 'ios', 'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'), }), // Remove all files from the out dir. new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: itemsToClean, verbose: !!verbose }), // Copy assets new CopyWebpackPlugin([ ...copyTargets, { from: { glob: '**/*.jpg', dot: false } }, { from: { glob: '**/*.png', dot: false } }, ], copyIgnore), new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'), // For instructions on how to set up workers with webpack // check out https://github.com/nativescript/worker-loader new NativeScriptWorkerPlugin(), ngCompilerPlugin, // Does IPC communication with the {N} CLI to notify events when running in watch mode. new nsWebpack.WatchStateLoggerPlugin() ], stats: { warningsFilter: [/critical dependency:/i], }, }; if (report) { // Generate report files for bundles content config.plugins.push( new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false, generateStatsFile: true, reportFilename: resolve(projectRoot, 'report', `report.html`), statsFilename: resolve(projectRoot, 'report', `stats.json`) }) ); } if (snapshot) { config.plugins.push( new nsWebpack.NativeScriptSnapshotPlugin({ chunk: 'vendor', angular: true, requireModules: [ 'reflect-metadata', '@angular/platform-browser', '@angular/core', '@angular/common', '@angular/router', '@nativescript/angular' ], projectRoot, webpackConfig: config, snapshotInDocker, skipSnapshotTools, useLibs }) ); } if (!production && hmr) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); } return config; };

  • node-cross-spawn

    A cross platform solution to node's spawn and spawnSync

    Project mention: I will pay you cash to delete your NPM module | news.ycombinator.com | 2021-11-16
  • hyper-haskell-server

    The strongly hyped Haskell interpreter.

  • boram

    :film_strip: Cross-platform graphical WebM converter

  • clchart

    A fast, simple and cross-platform(html5 react-native weex wechat-applet) stock chart library created using canvas.

    Project mention: How would I go about recreating a similar chart? Fairly new to react native. Thanks in advance :)) | reddit.com/r/reactnative | 2021-06-09
  • cross-platform-terminal-characters

    All the characters that work on most terminals

    Project mention: All the characters that work on any terminal and any operating system | reddit.com/r/commandline | 2021-03-29

    I think the confusion might be in my improper usage of "Windows terminal" where I meant "Windows default terminal", i.e. "Console host" (which you rightfully corrected). I fixed the document to use the proper term.

  • electron-office

    An unofficial cross platform (including Linux) Electron client for Office Web

    Project mention: Why do people complains about high memory usage and high disk usage ? This is a brand new install of Windows 11 - it even uses less memory than a same install of Windows 10 | reddit.com/r/Windows11 | 2021-10-11

    For O365 there is this Electron wrapper. But not much else can be done and this is Microsoft's fault, not Linux's. We can't create a fully featured client for Microsoft just because Microsoft doesn't want to.

  • react-native-image-blur-shadow

    A React Native Image component with Blur Drop Shadows,100% JavaScript, 0 dependency component. Supports Android, iOS and Web. A light weight <Image/> component for your react native project.

    Project mention: How can I handle the (image) layout flickering problem while the components are loading? (Especially on home and explore screen) | reddit.com/r/reactnative | 2021-08-31

    I used react-native-blur-shadow

  • Geniemoji

    Geniemoji - The Emoji Genie 🧞‍♂️

    Project mention: I made a desktop app - Geniemoji | reddit.com/r/developersIndia | 2021-05-22

    Download here

  • wybm

    :scissors: Extract and cut youtube webms

    Project mention: Is there a way to download part of a video? | reddit.com/r/software | 2021-03-26

    Wybm or Boram.

  • react-bones

    💀 Dead simple content loading components for React and React-Native. 💀

    Project mention: I've been working on a cross-platform (web/android/iOS) component lib for content loading and have trouble with local linking when I use third-party libs like react-spring. From NPM it works, but not when I run it with Lerna. Has anyone else had luck or issues local linking react-native packages? | reddit.com/r/reactnative | 2021-09-29
  • Mr.Dclutterer

    A minimal looking cross-platform desktop application made with Electron that handles quick file aggregation and bulk renaming.

    Project mention: Cross platform app to aggregate and rename files in bulk with simple drag n' drop | dev.to | 2021-05-17

    GitHub repo: https://github.com/deep5050/Mr.Dclutterer app store: https://www.electronjs.org/apps/mrdclutterer

  • authme

    Simple cross platform two-factor authentication app for desktop

    Project mention: Authme 3.0.0 released! | dev.to | 2021-12-30

    Website GitHub

  • grader-base

    This is the base repository for Grader.JS projects.

    Project mention: Show HN: Grader-Base – cross-platform app skeleton kit and API docs | news.ycombinator.com | 2021-08-16
  • MeetingAssistant

    Meeting Assistant is an app that helps you join recurring online meetings with ease.

    Project mention: The Ultimate Meeting Joiner? | dev.to | 2021-02-05

    What is Meeting Assistant

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-12-30.

JavaScript Cross-Platform related posts

Index

What are some of the best open-source Cross-Platform projects in JavaScript? This list will help you:

Project Stars
1 Aurelia 1 11,663
2 Google-Play-Music-Desktop-Player-UNOFFICIAL- 8,453
3 fkill 6,437
4 pennywise 3,398
5 Google-Assistant-Unofficial-Desktop-Client 2,601
6 style-dictionary 2,160
7 viro 1,764
8 re-start 1,290
9 nativescript-cli 1,004
10 node-cross-spawn 911
11 hyper-haskell-server 356
12 boram 354
13 clchart 283
14 cross-platform-terminal-characters 176
15 electron-office 75
16 react-native-image-blur-shadow 73
17 Geniemoji 59
18 wybm 54
19 react-bones 41
20 Mr.Dclutterer 29
21 authme 28
22 grader-base 9
23 MeetingAssistant 6
Find remote jobs at our new job board 99remotejobs.com. There are 30 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Static code analysis for 29 languages.
Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
www.sonarqube.org