Get Started | Blockly | Google Developers

How to get started integrating Blockly into your application. ... First, download the source code from GitHub. If you know how to use Git or Subversion, ... Blockly Language English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어 Signin Home Guides Reference Samples GetHelp Summits Publications Blockly Home Guides Reference Samples GetHelp Summits Publications Overview GetStarted ConfigureBlockly InjectionOptions ConfigurationStructGridMoveZoomFixedSizeWorkspaceResizableWorkspaceToolboxCodeGeneratorsEventsSerializationCloudStorageThemesKeyboardNavigationTranslationsContextMenusAddCustomBlocks CreateCustomBlocks OverviewBlocklyDeveloperToolsDefineBlocksBlockColourLocalizeBlocksGeneratingCodeBlockParadigmsStyleGuideOperatorPrecedenceCachingArgumentsTypeChecksExtensionsandMutatorsVariables Fields OverviewAnatomyofaFieldValidators Built-inFields OverviewAngleCheckboxColourDropdownImageLabelLabel(Serializable)NumberTextInputVariable CustomizingFields OverviewCreatingaCustomFieldExtendinganExistingFieldUpgradingaCustomField ApplicationIntegration BestPracticesGeneratingandRunningJavaScriptAttributingBlockly ModifyBlockly Contributing OverviewWritingaGoodIssueWritingaGoodPRStyleGuideCommitMessageGuideTheCodeReviewProcessWritingaCodelabAddingaPluginIssueLabelsBlockly-samplesRepositoryStructurePlaygroundDevelopmentSetupForkingBlocklyBuildingAdvancedCompilationTranslatingUnitTesting Plugins OverviewUsingBlocklyAPIsDebuggingNamingConventions Interfaces OverviewConnectionCheckerMetricsManager Home Products GoogleforEducation Blockly Guides GetStarted Thisdocumentisaimedatdeveloperswhowishtocreatetheirownapplications thatincorporateBlocklyasacodeeditor.Itisassumedthatoneisgenerally familiarwithBlockly'susage,andonehasabasicunderstandingofHTMLand JavaScript. Afterreadingthisdocument,youmaywishtotrythe GettingStartedcodelab. Overview Blocklyisdesignedtoeasilyinstallintoyourwebapplication.Usersdrag blocksaround,Blocklygeneratescode,yourapplicationdoessomethingwiththat code.Fromyourapplication'spointofview,Blocklyisjustatextareainwhich theusertypessyntacticallyperfectJavaScript,Python,PHP,Lua,Dart,oranother language. Blocklyis100%clientside,requiringnosupportfromtheserver(unlessone wantstousethecloud-storagefeature).Thereareno3rdpartydependencies (unlessonewantstorecompilethecore).Everythingisopensource. GettheCode Recommended:npm Blocklyispublishedonthe npmregistryand yarnregistry.Werecommendaccessing Blocklythroughapackagemanagerbecause: ItiseasiertostayuptodatewithchangesinBlockly Itencouragesusingpluginsinsteadof monkeypatchingBlockly Ifyouneedmoreconvincingyoucanwatchour2021Blocklyonnpmtalk. Ifyouarealreadyusingapackagemanager,youcaninstallBlocklywith npminstall--saveblockly YoucanreferenceBlocklyinyourapplicationcodewith: importBlocklyfrom'blockly'; Thiswillimportthedefaultpackages.Formoreinformation, seethepackagereadme, andtheexamplesforusingBlocklywith Node andwebpack. Unpkg Ifyouaren'tusingapackagemanagerforyourproject,butdon'twanttohave tocopythecodeyourself,youcanuseunpkg. Unpkggrabsthelatestversionofthepublishedcode,sotherewon'tbeany versioncontrolwiththismethod.Itisgreatfordemosorquickexperiments, andweuseitinmanycodelabs. GitHub YoucanalsocopytheentiresourcecodefromGitHub.However,youwillhaveto manuallysynctoourrepositoryatregularintervalsinordertoreceivethe latestupdatesandfixestoBlockly. First,downloadthesourcecodefromGitHub.IfyouknowhowtouseGitorSubversion, wehighlyrecommendsyncingfromourrepositorysothatyourcodestaysuptodate. Onceyouhavethecode,pointyourbrowseratdemos/fixed/index.htmland verifythatblockscanbedraggedaround. Inyourapplicationcode,youcanloadBlocklywith: Youmayneedtoincludeotherfilesaswell,whichareexplainedinthe "InjectingBlockly"guideslinkedinthenextsection. InjectingBlockly WithyourinstallationofBlocklyverifiedasworking,injectBlocklyintoa webpageusingafixed-sizediv. →Moreinfooninjectingfixed-sizedBlockly... MoreadvancedwebpagesmaywishtoallowBlocklytoresizetofillthepage. →MoreinfooninjectingresizableBlockly... Configuration Blocklyishighlyconfigurable.Forinstance,youmaysetthethemeorrendereronaworkspace,setaworkspacetoRTLmode,orselectfromavarietyofzoomandscrollmodes. Configurationisdoneper-workspace,bypassingaconfigurationstructwheninjectingaBlocklyworkspace. →Moreinfoonconfiguringaworkspace... DefiningBlocks InadditiontothedefaultblocksthatcomewithBlockly,customblocksneedto bebuilttocallyourwebapplication'sAPI. Anexampleisthismazegamewhich hascustomblocksformovement. →Moreinfooncreatingcustomblocks... CodeGenerators Blocklyisnotaprogramminglanguage,onecannot'run'aBlocklyprogram. Instead,Blocklycantranslatetheuser'sprogramintoJavaScript,Python,PHP, Dart,orsomeotherlanguage. →Moreinfooncodegenerators... ImportingandExportingBlocks Ifyourapplicationneedstosaveandstoretheuser'sblocksandrestorethem atalatervisit,usethiscalltoserializetoJSON: varjson=Blockly.serialization.workspaces.save(workspace); AnddeserializingJSONtoblocksisjustaseasy: Blockly.serialization.workspaces.load(json); CloudStorage Blocklycomeswithanoptionalcloud-storagefeature.Itenablesuserstosave, load,share,andpublishtheirprograms.IfyourprojectishostedonAppEngine youcantakeadvantageofthisservice. →MoreinfoonCloudStorage... Exceptasotherwisenoted,thecontentofthispageislicensedundertheCreativeCommonsAttribution4.0License,andcodesamplesarelicensedundertheApache2.0License.Fordetails,seetheGoogleDevelopersSitePolicies.JavaisaregisteredtrademarkofOracleand/oritsaffiliates. Lastupdated2022-03-24UTC. [{ "type":"thumb-down", "id":"missingTheInformationINeed", "label":"MissingtheinformationIneed" },{ "type":"thumb-down", "id":"tooComplicatedTooManySteps", "label":"Toocomplicated/toomanysteps" },{ "type":"thumb-down", "id":"outOfDate", "label":"Outofdate" },{ "type":"thumb-down", "id":"samplesCodeIssue", "label":"Samples/codeissue" },{ "type":"thumb-down", "id":"otherDown", "label":"Other" }] [{ "type":"thumb-up", "id":"easyToUnderstand", "label":"Easytounderstand" },{ "type":"thumb-up", "id":"solvedMyProblem", "label":"Solvedmyproblem" },{ "type":"thumb-up", "id":"otherUp", "label":"Other" }] Connect Blog Facebook Medium Twitter YouTube Programs WomenTechmakers GoogleDeveloperGroups GoogleDevelopersExperts Accelerators GoogleDeveloperStudentClubs Developerconsoles GoogleAPIConsole GoogleCloudPlatformConsole GooglePlayConsole FirebaseConsole ActionsonGoogleConsole CastSDKDeveloperConsole ChromeWebStoreDashboard Android Chrome Firebase GoogleCloudPlatform Allproducts Terms Privacy SignupfortheGoogleDevelopersnewsletter Subscribe Language English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어